javascript - Javascript 只运行一个

Question

我有一个问题在哪里

$(document).ready(function(){    
     $("# btn"). click (function () {
         $ ("# canshow"). fadeToggle ("slow");
    });
 });

和

<a id="btn"> Button </ a>
<div id="canshow"> 1 </ div>
<div id="canshow"> 2 </ div>
<div id="canshow"> 3 </ div>

为什么只有那个功能

<div id="canshow"> 1 </ div>

而其他人则没有。
我想

<div id="canshow"> 2 </ div>
<div id="canshow"> 3 </ div>

也有效。请帮我。

score 3 · Accepted Answer

您想使用类而不是 ID。尝试这个：

$ (".canshow"). fadeToggle ("slow");

使用此 HTML：

 <div class="canshow"> 1 </ div>
 <div class="canshow"> 2 </ div>
 <div class="canshow"> 3 </ div>

有关更多信息，请参阅元素标识符：id 和类属性。尤其是：

id = name [CS]

此属性为元素分配名称。此名称在文档中必须是唯一的。

class = cdata-list [CS]

该属性将一个类名或一组类名分配给一个元素。可以为任意数量的元素分配相同的类名或名称。多个类名必须用空格字符分隔。

score 0 · Accepted Answer

使用class. ID必须是唯一的..

$(document).ready(function(){    
     $("#btn").click(function() {
         $(".canshow").fadeToggle("slow");
    });
 });

和

<a id="btn"> Button </a>
<div class="canshow"> 1 </div>
<div class="canshow"> 2 </div>
<div class="canshow"> 3 </div>

2 回答 2