如何在一個選擇器中顯示和隱藏多個元素jQuery？

Question

我想顯示ID爲hidden_element隱藏的元素，當我點擊與類show_hidden_element元素，並關閉ID爲hidden_element元素時，我點擊元ID close_hidden_element，如果我只是讓我的腳本可以正常工作，但我有三個元素具有相同的CLASS和ID，它不能工作，有人請幫忙。

這是我的腳本

<article class="post show_hidden_element"> 
    <div id="hidden_element"> 
     <div class="read_box"> 
      <div class="read_box_content"> 
       <h2 class="title">Lorem Ipsum</h2> 
       <a id="close_hidden_element" class="button_close">&times;</a> 
      </div> 
     </div> 
    </div> 
    <div class="border"></div> 
</article> 

<article class="post show_hidden_element"> 
    <div id="hidden_element"> 
     <div class="read_box"> 
      <div class="read_box_content"> 
       <h2 class="title">Lorem Ipsum</h2> 
       <a id="close_hidden_element" class="button_close">&times;</a> 
      </div> 
     </div> 
    </div> 
    <div class="border"></div> 
</article> 

<article class="post show_hidden_element"> 
    <div id="hidden_element"> 
     <div class="read_box"> 
      <div class="read_box_content"> 
       <h2 class="title">Lorem Ipsum</h2> 
       <a id="close_hidden_element" class="button_close">&times;</a> 
      </div> 
     </div> 
    </div> 
    <div class="border"></div> 
</article> 

我的jQuery腳本是在頁面上

$(this).find(".show_hidden_element").click(function(){ 
     $(this).find("#hidden_element").show(); 
    }); 
    $(this).find("#close_hidden_element").click(function(){ 
     $(this).find("#hidden_element").hide(); 
    }); 

Answer 1

id和class之間的區別是，ID是唯一的，類不是。 另外一個元素可能有多個類，但唯一的ID。使用class="close_hidden_element button_close"。

<article class="post show_hidden_element"> 
    <div class="hidden_element"> 
     <div class="read_box"> 
      <div class="read_box_content"> 
       <h2 class="title">Lorem Ipsum</h2> 
       <a class="close_hidden_element button_close">&times;</a> 
      </div> 
     </div> 
    </div> 
    <div class="border"></div> 
</article> 

<article class="post show_hidden_element"> 
    <div class="hidden_element"> 
     <div class="read_box"> 
      <div class="read_box_content"> 
       <h2 class="title">Lorem Ipsum</h2> 
       <a class="close_hidden_element button_close">&times;</a> 
      </div> 
     </div> 
    </div> 
    <div class="border"></div> 
</article> 

<article class="post show_hidden_element"> 
    <div class="hidden_element"> 
     <div class="read_box"> 
      <div class="read_box_content"> 
       <h2 class="title">Lorem Ipsum</h2> 
       <a class="close_hidden_element button_close">&times;</a> 
      </div> 
     </div> 
    </div> 
    <div class="border"></div> 
</article> 

而你的jQuery應該是。

$(document).on('click', 'div.show_hidden_element',function(){ 
    $(".hidden_element").show(); 
}); 
$(document).on('click', 'div.close_hidden_element',function(){ 
    $(".hidden_element").hide(); 
}); 

諮詢：閱讀本http://css-tricks.com/the-difference-between-id-and-class/

Answer 2

元素必須UNIQUE標識。如果你想這個工作，你需要改變他們到類。你希望每個<article>只隱藏/顯示各自的觸發器嗎？

<article class="post show_hidden_element"> 
    <div class="hidden_element"> 
     <div class="read_box"> 
      <div class="read_box_content"> 
       <h2 class="title">Lorem Ipsum</h2> 
       <a class="close_hidden_element" class="button_close">&times;</a> 
      </div> 
     </div> 
    </div> 
    <div class="border"></div> 
</article> 

<article class="post show_hidden_element"> 
    <div class="hidden_element"> 
     <div class="read_box"> 
      <div class="read_box_content"> 
       <h2 class="title">Lorem Ipsum</h2> 
       <a class="close_hidden_element" class="button_close">&times;</a> 
      </div> 
     </div> 
    </div> 
    <div class="border"></div> 
</article> 

<article class="post show_hidden_element"> 
    <div class="hidden_element"> 
     <div class="read_box"> 
      <div class="read_box_content"> 
       <h2 class="title">Lorem Ipsum</h2> 
       <a class="close_hidden_element" class="button_close">&times;</a> 
      </div> 
     </div> 
    </div> 
    <div class="border"></div> 
</article> 

jQuery的

$("article").on("click",".show_hidden_element",function(){ 
    $(this).find(".hidden_element").show(); 
}); 
$("article").on("click",".close_hidden_element",function(){ 
    $(this).closest(".hidden_element").hide(); 
}); 

其實，這不起作用，因爲show_hidden_element類的位置的完全正確。你可能會更好具有<a close="close_hidden_element" class="button_close">&times;</a>被撥動，像這樣：

<article class="post show_hidden_element"> 
    <div class="hidden_element"> 
     <div class="read_box"> 
      <div class="read_box_content"> 
       <h2 class="title">Lorem Ipsum</h2> 
<a class="close_hidden_element" class="button_close">&times;</a> 

      </div> 
     </div> 
    </div> 
</article> 

$(function() { 
    $("article").on("click", ".close_hidden_element", function() { 
     $(".hidden_element").toggle(); 
    }); 
}); 

Answer 3

不能有多個元素相同的ID。您必須將id轉換爲所有id =「hidden_​​element」（以及其他人）的類，然後使用類似這樣的內容。

<article class="post show_hidden_element"> 
    <div class="hidden_element"> 
     <div class="read_box"> 
      <div class="read_box_content"> 
       <h2 class="title">Lorem Ipsum</h2> 
       <a id="close_hidden_element1" class="button_close">&times;</a> 
      </div> 
     </div> 
    </div> 
    <div class="border"></div> 
</article> 

<article class="post show_hidden_element"> 
    <div class="hidden_element"> 
     <div class="read_box"> 
      <div class="read_box_content"> 
       <h2 class="title">Lorem Ipsum</h2> 
       <a id="close_hidden_element2" class="button_close">&times;</a> 
      </div> 
     </div> 
    </div> 
    <div class="border"></div> 
</article> 

<article class="post show_hidden_element"> 
    <div class="hidden_element"> 
     <div class="read_box"> 
      <div class="read_box_content"> 
       <h2 class="title">Lorem Ipsum</h2> 
       <a id="close_hidden_element3" class="button_close">&times;</a> 
      </div> 
     </div> 
    </div> 
    <div class="border"></div> 
</article> 

jQuery的

$(".show_hidden_element").click(function(){ 
    $(this).find(".hidden_element").show(); 
}); 

$(".button_close").click(function(){ 
    $(this).closest(".hidden_element").hide(); 
});