在循環中切換個別div

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()只切換第一div的例如，和getElementsByClass()似乎並沒有工作到目前爲止 - 不太確定如何做到這一點 - 任何想法非常感謝！

Answer 1

第一條規則，不要插入多個具有相同ID的元素。 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說，你需要的ID是唯一的，因爲那是你得到你的元素的方式。

$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

另一個答案，只是因爲我已經準備好了答案，並且在我發佈之前就已經被調用了。所以在這裏。

請注意，對於重複元素，使用類而不是ID。他們工作得很好，並且（正如其他人已經說過的），ID必須是唯一的。

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