如何提高效率？ -多個jQuery切換

Question

我有一些圖像可以用作jQuery切換開關-在click事件上顯示或隱藏元素。

下面的代碼通常可以按預期工作，但是我可以肯定地說我正在使用很多不必要的東西來實現它。 有任何簡化建議嗎？

另外，關於關閉（切換為隱藏）已經切換為可見的任何可見元素的任何建議？ 到現在為止，如果用戶單擊第一幅圖像，然后單擊第二幅圖像，它將新可見的元素彼此堆疊。 理想情況下，我想在單擊第二個切換開關時關閉（隱藏）第一個切換開關的元素和/或關閉滾動事件上的所有打開的元素。

下面的代碼是節略的。 實際上有10個以上的切換開關，如果用戶打開了很多開關，它們可能會變得有些笨拙。

編輯-根據以下答案，我使用了常見的類來加強jQuery。 當單擊下一個切換時，該解決方案還關閉（隱藏）任何其他打開（可見）的元素，但僅在該切換的父對象中。 由於多個父div之間存在多個UL分解，因此單擊以關閉wihtin“ column2”將關閉“ column2”中的所有可見元素，但不會關閉另一列中的可見元素（即：column1中的open / visible元素）

更新的代碼：

  $(".show-wine").click(function(){ // Hide all wines except for the one that was clicked $(this).parent().siblings().find(".wine-text").hide(); // Show or hide the one that was clicked $(".wine-text", $(this).parent()).toggle(); }); $(".hide-wine").click(function(){ $('.wine-text').hide(); // Hide all wines }); 

 .wine-text { display:none; position:fixed; top:3em; left:1.5em; width:35em; padding:1em; height:auto; min-height:30em; background: rgba(0,0,0,0.95); color:#FFF; border-radius:4px; line-height:1.25em; text-align:left; } .wine-tiles li img:hover { cursor:pointer; opacity:.7; } .wine-tiles li img .unhide:hover .wine-text { display:block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="column1"> <ul class="wine-tiles"> <li> <img src="images/labels/image.jpg" class="show-wine unhide bounce" alt="Img 3"/> <span class="wine-text"> <span class="wine-text-title centered">Wine#1</span><br> <span class="wine-text-winery centered">Big White House</span><br><br> <span class="wine-text-copy">Lorem Ipsum</span> <br/><br/> <button class="button hide-wine">Close</button> </span> <h2>Title1</h2> </li> <li> <img src="images/labels/image.jpg" class="show-wine unhide bounce" alt="Img 3"/> <span class="wine-text"> <span class="wine-text-title centered">Wine#2</span><br> <span class="wine-text-winery centered">Big White House</span><br><br> <span class="wine-text-copy">Lorem Ipsum</span> <br/><br/> <button class="button hide-wine">Close</button> </span> <h2>Title2</h2> </li> <li> <img src="images/labels/image.jpg" class="show-wine unhide bounce" alt="Img 3"/> <span class="wine-text"> <span class="wine-text-title centered">Wine#3</span><br> <span class="wine-text-winery centered">Big White House</span><br><br> <span class="wine-text-copy">Lorem Ipsum</span> <br/><br/> <button class="button hide-wine">Close</button> </span> <h2>Title3</h2> </li> </ul> </div> <div id="column2"> <ul class="wine-tiles"> <li> <img src="images/labels/image.jpg" class="show-wine unhide bounce" alt="Img 3"/> <span class="wine-text"> <span class="wine-text-title centered">Wine#4</span><br> <span class="wine-text-winery centered">Big White House</span><br><br> <span class="wine-text-copy">Lorem Ipsum</span> <br/><br/> <button class="button hide-wine">Close</button> </span> <h2>Title4</h2> </li> <li> <img src="images/labels/image.jpg" class="show-wine unhide bounce" alt="Img 3"/> <span class="wine-text"> <span class="wine-text-title centered">Wine#5</span><br> <span class="wine-text-winery centered">Big White House</span><br><br> <span class="wine-text-copy">Lorem Ipsum</span> <br/><br/> <button class="button hide-wine">Close</button> </span> <h2>Title5</h2> </li> <li> <img src="images/labels/image.jpg" class="show-wine unhide bounce" alt="Img 3"/> <span class="wine-text"> <span class="wine-text-title centered">Wine#6</span><br> <span class="wine-text-winery centered">Big White House</span><br><br> <span class="wine-text-copy">Lorem Ipsum</span> <br/><br/> <button class="button hide-wine">Close</button> </span> <h2>Title6</h2> </li> </ul> </div> 

原始代碼：

 $("#show-wine").click(function(){ $(".wine-text").toggle(); }); $("#show-wine2").click(function(){ $(".wine-text2").toggle(); }); $("#show-wine3").click(function(){ $(".wine-text3").toggle(); }); 

 .wine-text, .wine-text2, .wine-text3, .wine-text4, .wine-text5, .wine-text6, .wine-text7, .wine-text8, .wine-text9 { display:none; position:fixed; top:3em; left:1.5em; width:35em; padding:1em; height:auto; min-height:30em; background: rgba(0,0,0,0.95); color:#FFF; border-radius:4px; line-height:1.25em; text-align:left; } .wine-tiles li img:hover { cursor:pointer; opacity:.7; } .wine-tiles li img .unhide:hover .wine-text { display:block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="column1"> <ul class="wine-tiles"> <li> <img src="images/labels/image.jpg" id="show-wine" class="unhide bounce" alt="Img 1"/> <span class="wine-text"> <span class="wine-text-title centered">Wine#1</span><br> <span class="wine-text-winery centered">Big White House</span><br><br> <span class="wine-text-copy">Lorem Ipsum</span> <br/><br/> <button id="hide-wine" class="button">Close</button> </span> <h2>Title</h2> </li> <li> <img src="images/labels/image.jpg" id="show-wine2" class="unhide bounce" alt="Img 2"/> <span class="wine-text2"> <span class="wine-text-title centered">Wine#2</span><br> <span class="wine-text-winery centered">Big White House</span><br><br> <span class="wine-text-copy">Lorem Ipsum</span> <br/><br/> <button id="hide-wine" class="button">Close</button> </span> <h2>Title</h2> </li> <li> <img src="images/labels/image.jpg" id="show-wine3" class="unhide bounce" alt="Img 3"/> <span class="wine-text3"> <span class="wine-text-title centered">Wine#3</span><br> <span class="wine-text-winery centered">Big White House</span><br><br> <span class="wine-text-copy">Lorem Ipsum</span> <br/><br/> <button id="hide-wine" class="button">Close</button> </span> <h2>Title</h2> </li> </ul> </div> <div id="column2"> <ul class="wine-tiles"> <li> <img src="images/labels/image.jpg" id="show-wine" class="unhide bounce" alt="Img 1"/> <span class="wine-text"> <span class="wine-text-title centered">Wine#4</span><br> <span class="wine-text-winery centered">Big White House</span><br><br> <span class="wine-text-copy">Lorem Ipsum</span> <br/><br/> <button id="hide-wine" class="button">Close</button> </span> <h2>Title</h2> </li> <li> <img src="images/labels/image.jpg" id="show-wine2" class="unhide bounce" alt="Img 2"/> <span class="wine-text2"> <span class="wine-text-title centered">Wine#5</span><br> <span class="wine-text-winery centered">Big White House</span><br><br> <span class="wine-text-copy">Lorem Ipsum</span> <br/><br/> <button id="hide-wine" class="button">Close</button> </span> <h2>Title</h2> </li> <li> <img src="images/labels/image.jpg" id="show-wine3" class="unhide bounce" alt="Img 3"/> <span class="wine-text3"> <span class="wine-text-title centered">Wine#6</span><br> <span class="wine-text-winery centered">Big White House</span><br><br> <span class="wine-text-copy">Lorem Ipsum</span> <br/><br/> <button id="hide-wine" class="button">Close</button> </span> <h2>Title</h2> </li> </ul> </div> 

Answer 1

只需為觸發切換的元素提供一個通用類，並為切換元素提供一個通用類。 然后，對於您的特定情況，可以使用：

$(".show-wine").click(function(){  
    var $target = $(this).next('.wine-text').toggle();
    $('.wine-text').not($target).hide()
});

如果您稍微更改DOM，那將不起作用。 對於更一般的情況，您需要首先定位公共父對象：

$(".show-wine").click(function(){  
    var $target = $(this).closest('li').find('.wine-text').toggle();
    $('.wine-text').not($target).hide()
});

---

 $(".show-wine").click(function(){ var $target = $(this).closest('li').find('.wine-text').toggle(); $('.wine-text').not($target).hide() }); 

 .wine-text { display:none; position:fixed; top:3em; left:1.5em; width:35em; padding:1em; height:auto; min-height:30em; background: rgba(0,0,0,0.95); color:#FFF; border-radius:4px; line-height:1.25em; text-align:left; } .wine-tiles li img:hover { cursor:pointer; opacity:.7; } .wine-tiles li img .unhide:hover .wine-text { display:block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="column1"> <ul class="wine-tiles"> <li> <img src="images/labels/image.jpg" class="show-wine unhide bounce" alt="Img 3"/> <span class="wine-text"> <span class="wine-text-title centered">Wine#1</span><br> <span class="wine-text-winery centered">Big White House</span><br><br> <span class="wine-text-copy">Lorem Ipsum</span> <br/><br/> <button class="button hide-wine">Close</button> </span> <h2>Title1</h2> </li> <li> <img src="images/labels/image.jpg" class="show-wine unhide bounce" alt="Img 3"/> <span class="wine-text"> <span class="wine-text-title centered">Wine#2</span><br> <span class="wine-text-winery centered">Big White House</span><br><br> <span class="wine-text-copy">Lorem Ipsum</span> <br/><br/> <button class="button hide-wine">Close</button> </span> <h2>Title2</h2> </li> <li> <img src="images/labels/image.jpg" class="show-wine unhide bounce" alt="Img 3"/> <span class="wine-text"> <span class="wine-text-title centered">Wine#3</span><br> <span class="wine-text-winery centered">Big White House</span><br><br> <span class="wine-text-copy">Lorem Ipsum</span> <br/><br/> <button class="button hide-wine">Close</button> </span> <h2>Title3</h2> </li> </ul> </div> <div id="column2"> <ul class="wine-tiles"> <li> <img src="images/labels/image.jpg" class="show-wine unhide bounce" alt="Img 3"/> <span class="wine-text"> <span class="wine-text-title centered">Wine#4</span><br> <span class="wine-text-winery centered">Big White House</span><br><br> <span class="wine-text-copy">Lorem Ipsum</span> <br/><br/> <button class="button hide-wine">Close</button> </span> <h2>Title4</h2> </li> <li> <img src="images/labels/image.jpg" class="show-wine unhide bounce" alt="Img 3"/> <span class="wine-text"> <span class="wine-text-title centered">Wine#5</span><br> <span class="wine-text-winery centered">Big White House</span><br><br> <span class="wine-text-copy">Lorem Ipsum</span> <br/><br/> <button class="button hide-wine">Close</button> </span> <h2>Title5</h2> </li> <li> <img src="images/labels/image.jpg" class="show-wine unhide bounce" alt="Img 3"/> <span class="wine-text"> <span class="wine-text-title centered">Wine#6</span><br> <span class="wine-text-winery centered">Big White House</span><br><br> <span class="wine-text-copy">Lorem Ipsum</span> <br/><br/> <button class="button hide-wine">Close</button> </span> <h2>Title6</h2> </li> </ul> </div> 

Answer 2

我不確定這是否是最有效的方法（當然有多種方法可以做到），但這將是其中一種：

http://jsfiddle.net/zah9a7xp/2/

通過按類別選擇圖像並使用其父級，您可以獲取如下的javascript代碼：

$(".show-wine").click(function(){
    var $target = $(".wine-text", $(this).parent());
    // Hide all wines except for the one that was clicked
    $('.wine-text').not($target).hide();
    // Show or hide the one that was clicked
    $target.toggle();
});
$(".hide-wine").click(function(){
    $('.wine-text').hide(); // Hide all wines
});