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>

也有效。请帮我。

Answer 1

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

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

使用此HTML：

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

---

有关详细信息，请参阅Element identifiers: the id and class attributes。特别是：

  

id = name [CS]

     

此属性为元素指定名称。该名称在文档中必须是唯一的。

     

class = cdata-list [CS]

     

此属性为元素指定类名或类名集。可以为任意数量的元素分配相同的类名或名称。多个类名必须用空格字符分隔。

Answer 2

使用class。 Ids必须是唯一的..

$(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>

http://jsfiddle.net/szF33/

演示