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

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

<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() {
$('#link').toggle('slow', function() {
// Animation complete.
});
});
</script>

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

$（'#buton'）。单击（函数（）{
$（'#link'）。切换（'slow'，function（））{
//动画完成。
});
});

因此，在第一种情况下，它确实起作用，但在第二种情况下（其他情况下），它不起作用。为什么？我怎样才能解决这个问题？（我将在我的原始页面上使用10多个按钮，请告诉我最好的想法）

ID必须是唯一的

您应该尝试使用类来代替

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>

<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() {
$('#link').toggle('slow', function() {
// Animation complete.
});
});
</script>

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

$（'.buton'）。单击（函数（）{
$（'#'+this.getAttribute（“数据为”））.toggle（'slow'，function（）{
//动画完成。
});
});

ID必须是唯一的

您应该尝试使用类来代替

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>

<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() {
$('#link').toggle('slow', function() {
// Animation complete.
});
});
</script>

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

$（'.buton'）。单击（函数（）{
$（'#'+this.getAttribute（“数据为”））.toggle（'slow'，function（）{
//动画完成。
});
});

在HTML

id

s中必须是唯一的。浏览器通过只为

#link

返回一个结果来强制执行此操作

您可以给他们不同的

id

s，也可以使用一个类

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

或

---

在HTML中，id必须是唯一的。浏览器通过只为

#link

返回一个结果来强制执行此操作

您可以给他们不同的

id

s，也可以使用一个类

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

或

---

1.）ID属性必须是唯一的，因此您的HTML无效。2.）可以为所有按钮设置类属性，并在JS中设置事件处理程序，如$（“.buttonclass”）。单击（…1.）ID属性必须是唯一的，因此HTML无效。2.）您可以为所有按钮设置类属性，并在JS中设置事件处理程序，如$（“.buttonclass”）。单击（…而不是

getAttribute（“data for”）

，您可以使用jquery

data（）

函数：

$（this）。数据（'for'）；

jquery将创建内部缓存（

.data（）

expando属性）在第一次调用检索数据属性值的

.data（）

后。杀死所有独角兽。因此，没有办法用常规语句代替link1、link2…？因为如果我创建（例如）10个按钮，然后取消第4个和第5个按钮，我将不得不修改所有按钮（从6-10）数字不重要，重要的是每个

链接的
数据都有一个对应的ID元素。除了
getAttribute（“data for”）
，您可以使用jquery
data（）
函数：
$（this）。数据（'for'）；
jquery将创建一个内部缓存（
.data（）
expando属性）在第一次调用检索数据属性值的
.data（）
后。杀死所有独角兽。因此，没有办法用常规语句代替link1、link2…？因为如果我创建（例如）10个按钮，然后取消第4个和第5个按钮，我将不得不修改所有按钮（从6-10）数字并不重要，重要的是
链接的每个
数据都有一个具有该ID的对应元素。