Question

我想在多个按钮上使用相同的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

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

您可以为他们提供不同的id或使用课程。

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

或

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

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

2 个答案: