Почему переключатель не работает с другими DIV?

Question

Здесь у меня есть ссылка на скрипку! Проблема только первый топ ДИВ работает ..

[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

Использовать общий класс вместо ids, , у вас не должно быть дубликатов идентификаторов.

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

Answer 2

У вас не может быть элементов с одинаковым идентификатором. Изменить top от id до class.

HTML

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

Javascript

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

JS Fiddle: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(); 
    }); 
}); 

Демо: Fiddle

Answer 4

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

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

Answer 5

Не используйте имя ID для multipal дивы. Всегда используйте класс. Кстати, вот ваш рабочий код.

<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(); 
    }); 
}); 

Demo

Answer 6

Используйте класс вместо Id. Id - уникальное свойство. fiddle

<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(); 
    }); 
});