jquery - 我怎样才能使它更有效率？ - 多个 jQuery 切换

Question

我有一些图像用作 jQuery 切换开关 - 在单击事件中显示或隐藏元素。

下面的代码大部分都按预期工作，但我相当确定我使用了很多不必要的东西来实现它。有什么精简建议吗？

此外，关于关闭(切换到隐藏)任何已经切换为可见的可见元素有什么建议吗？现在，如果用户点击第一张图片，然后点击第二张图片，它会将新出现的元素堆叠在一起。理想情况下，我想在单击第二个切换时关闭(隐藏)第一个切换中的元素和/或关闭滚动事件中的任何打开元素。

下面的代码被删节了。实际上有 10 多个开关，如果用户打开了其中的一堆开关，它们会变得有点笨拙。

编辑 - 根据下面的答案，我使用通用类来加强 jQuery。当单击下一个切换时，该解决方案还会关闭(隐藏)任何其他打开(可见)的元素，但仅限于该切换的父级内。由于多个 UL 在多个父 div 之间被分解，单击以关闭“column2”将关闭“column2”中的任何可见元素，但不会关闭另一列中的任何可见元素(即:来自 column1 的打开/可见元素)

更新代码:

 $(".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

我不确定这是否是最有效的方式(当然有多种方式)，但这将是其中之一:

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