循環切換單個div

Question

在數據庫中找到的每一行中，在HTML中呈現數據（在頁面下打印出一個div）時，我試圖找到一種方法來允許每個div中的每個按鈕在單擊時切換單個示例（默認為display:none在加載頁面時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的多個元素。 ID是唯一的 。

您需要的是在您單擊的按鈕附近切換示例，而不是要顯示/隱藏的任何（或全部） .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演示

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