為什么切換開關不能與其他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();
    });
});