为什么切换开关不能与其他DIV一起使用？

Question

在这里，我有一个小提琴链接！ 问题是只有第一个top div在起作用。

[http://jsfiddle.net/5Ux8L/4/][1]

HTML-

 <div id="top">top </div>
    <div id="box">box </div>
 <div id="top">top </div>
    <div id="box">box </div>

jQuery-

$(document).ready(function(){
  $("#top").click(function (){
        $("#box").toggle();
    });
});

Answer 1

使用通用类而不是ID， 您不应具有重复的ID 。

$(document).ready(function(){
  $(".top").click(function (){
        $(this).next().toggle();
    });
});

Answer 2

您不能使用具有相同ID的元素。 将top从id更改为class 。

的HTML

 <div class="top">top </div>
 <div class="box">box </div>
 <div class="top">top </div>
 <div class="box">box </div>

Java脚本

$(document).ready(function(){
  $(".top").click(function (){
        $(this).next(".box").toggle();
    });
});

JS小提琴： http : //jsfiddle.net/5T3K2/

Answer 3

元素的ID必须唯一，因此请使用类

<div class="top">top</div>
<div class="box">box</div>
<div class="top">top</div>
<div class="box">box</div>

然后

jQuery(function ($) {
    $(".top").click(function () {
        $(this).next().toggle();
    });
});

演示： 小提琴

Answer 4

$(document).ready(function(){
$(".top").click(function (){
    $(this).next(".box").toggle();
});
});

http://jsfiddle.net/5Ux8L/5/

Answer 5

不要对多位div使用id名称。 始终使用类。 顺便说一下，这是您的工作代码。

 <div class="top">top </div>
    <div class="box">box </div>
 <div class="top">top </div>
    <div class="box">box </div>

jQuery的

$(document).ready(function(){
  $(".top").click(function (){
        $(this).next().toggle();
    });
});

演示版

Answer 6

使用class代替Id。 ID是唯一属性。 小提琴

 <div class="top">top </div>
    <div class="box">box </div>
 <div class="top">top </div>
    <div class="box">box </div>

$(document).ready(function(){
  $(".top").click(function (){
        $(".box").toggle();
    });
});