如何提高效率？ -多个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
});