javascript - 如何修改 javascript 函数以操作多个按钮？

Question

我想在超过 1 个按钮上使用相同的 javascript 函数，但它不起作用。这是：

HTML

<a href="#" id="buton"><p> SOMETHING</p></a>
<a href="#" id="buton"><p> OTHERS</p></a>

<div id="link" style="display:none;">
    <h1>SOMETHING</h1>
</div>
<div id="link" style="display:none;">
    <h1>OTHERS</h1>
</div>

和JAVASCRIPT

<script>
$('#buton').click(function() {
$('#link').toggle('slow', function() {
// Animation complete.
});
});
</script>

所以在第一个按钮上它确实有效，但在第二个按钮（ OTHERS ）上它不起作用。为什么？我该如何解决？（我将在我的原始页面上使用超过 10 个按钮，所以请给我最好的想法）

Answer 1

ID 必须是唯一的。

您应该尝试改用一个类。

HTML

<a href="#" class="buton" data-for="link1"><p> SOMETHING</p></a>
<a href="#" class="buton" data-for="link2"><p> OTHERS</p></a>

<div id="link1" style="display:none;">
    <h1>SOMETHING</h1>
</div>
<div id="link2" style="display:none;">
    <h1>OTHERS</h1>
</div>

和JAVASCRIPT

<script>
$('.buton').click(function() {
  $('#'+this.getAttribute("data-for")).toggle('slow', function() {
    // Animation complete.
  });
});
</script>

Answer 2

在 HTMLid中必须是唯一的。浏览器通过只返回一个结果来强制执行此操作#link。

您可以给他们不同id的 s 或使用一个类。

$("#link1,#link2,#link3").toggle(..)

或者

$(".links").toggle(..)