Переключить отдельные divs в цикле

Question

При рендеринге данных в HTML, который выводит div вниз по странице, для каждой строки, найденной в базе данных, я пытаюсь найти способ разрешить каждой кнопке, которая находится в каждом div чтобы переключить индивидуальный пример при нажатии (значение по умолчанию display:none при загрузке страницы) - что-то типа:

function toggle_div(id) { 

    var divelement = document.getElementById(id); 

    if(divelement.style.display == 'none') 
     divelement.style.display = 'block'; 
    else 
     divelement.style.display = 'none'; 
} 

пример окончательной разметки:

<div> 
    <div class="wordtitle">Word</div> 
    <div class="numbers">1</div> 

    <div class="definition">Definition</div> 
    <button class="button" id="show_example" onClick="toggle_div('example')">Show example</button> 

    <div class="example" id="example">Example 1</div> 
</div> 

<div> 
    <div class="wordtitle">Word</div> 
    <div class="numbers">2</div> 

    <div class="definition">Definition</div> 
    <button class="button" id="show_example" onClick="toggle_div('example')">Show example</button> 

    <div class="example" id="example">Example 2</div> 
</div> 

getElementById() только переключает первый Див-х пример, и getElementsByClass(), похоже, пока не работает - не слишком уверен, как это сделать - любые идеи очень ценятся!

Answer 1

Первое правило, не вставляйте несколько элементов с тем же идентификатором. IDs are meant to be unique.

Что нужно, чтобы переключить пример рядом с кнопкой, которую вы нажали, а не любым (или всем) .example, который будет отображаться/скрываться. Для этого, учитывая, что вы использовали тэг [jquery] в своем вопросе, вы можете использовать селектор, чтобы получить ближайшую .example вашей кнопки, или использовать встроенные функции jQuery для его получения (.siblings()).

Я лично положил бы onclick из вашей разметки и связал бы эту пользовательскую функцию в вашем javascript.

Еще одна важная вещь:: если javascript отключен на стороне клиента, пользователь никогда не увидит ваш пример, поскольку по умолчанию они скрыты в CSS. Одним из исправлений было бы скрыть его сначала с помощью JS (см. Фрагмент для этого).

Вот демонстрация того, что я имею в виду:

$('.example-trigger').click(function() { 
 
    //Use the current button which triggered the event 
 
    $(this) 
 
    //Find the sibling you want to toggle, of a specified class 
 
    .siblings('.example-label') 
 
    //Toggle (hide or show) accordingly to the previous display status of the element 
 
    .toggle(); 
 

 
}); 
 

 

 
//Encouraged : hide examples only if Javascript is enabled 
 
//$('.example-label').hide();

.example-label { 
 
    display: none; 
 
    /* Discouraged : if javascript is disabled, user won't see a thing */ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div> 
 
    <button class="example-trigger">Toggle example 1</button> 
 
    <span class="example-label">Example 1</span> 
 
</div> 
 
<div> 
 
    <button class="example-trigger">Toggle example 2</button> 
 
    <span class="example-label">Example 2</span> 
 
</div> 
 
<div> 
 
    <button class="example-trigger">Toggle example 3</button> 
 
    <span class="example-label">Example 3</span> 
 
</div>

Answer 2

Как указано @Sean, вам нужен идентификатор должен быть уникальным, так как это так, как вы получаете ваши элементы.

$words .= '<div class="wordtitle">' . $word .'</div> 

<div class="numbers">' . $i . '</div> 
<div class="definition">' . $definition . '</div> 
<button class="button" id="show_example" onClick="toggle_div(\'example\''.$i.')"> 
show example</button> 
<div class="example" id="example'.$i.'">' . $example . '</div> 
<br/><br/>'; 
$i++; 

#show_example также будет повторять, так что вы, вероятно, хотите, чтобы изменить это к классу.

Answer 3

Другой ответ, только потому, что у меня был ответ готов, и меня вызвали, прежде чем я смог опубликовать его. Так вот оно.

Обратите внимание, что для повторяющихся элементов вместо идентификаторов используются классы. Они работают так же хорошо, и (как все уже сказали), идентификаторы должны быть уникальными.

jsFiddle demo

HTML:

<div class="def"> 
    <div class="wordtitle">Aardvark</div> 
    <div class="numbers">1</div> 
    <div class="definition">Anteater</div> 
    <button class="button show_example">show example</button> 
    <div class="example" id="example">The aardvark pushed its lenghty snout into the anthill and used its long, sticky tongue to extract a few ants.</div> 
</div> 
<div class="def"> 
    <div class="wordtitle">Anecdote</div> 
    <div class="numbers">2</div> 
    <div class="definition">Amusing Story</div> 
    <button class="button show_example">show example</button> 
    <div class="example" id="example">The man told an anecdote that left everyone laughing.</div> 
</div> 

JQuery:

var $this; 
$('.show_example').click(function() { 
    $this = $(this); 
    if ($this.hasClass('revealed')){ 
     $('.example').slideUp(); 
     $('.show_example').removeClass('revealed'); 
    }else{ 
     $('.example').slideUp(); 
     $('.show_example').removeClass('revealed'); 
     $this.parent().find('.example').slideDown(); 
     $this.addClass('revealed'); 
    } 
});