我怎样才能提高效率呢？ - 多个jQuery Toggles

时间：2014-09-24 17:30:59

标签： jquery html css

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

下面的代码大多按预期工作，但我相当肯定我正在使用很多不必要的东西来实现它。有关精简的任何建议吗？

此外，关于关闭（切换隐藏）任何已经切换为可见的可见元素的建议？现在，如果用户点击第一张图像然后点击第二张图片，它会将新显示的元素叠加在一起。理想情况下，当单击第二个切换和/或关闭滚动事件上的任何打开元素时，我想关闭（隐藏）第一个切换元素。

以下代码已删节。实际上有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>

2 个答案:

答案 0 :(得分：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()
});

＆＃13;
＆＃13; 
$(".show-wine").click(function(){  
    var $target = $(this).closest('li').find('.wine-text').toggle();
    $('.wine-text').not($target).hide()
});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：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
});
相关问题
最新问题