jquery - 在 jQuery 中管理 span 中的兄弟 li 元素

Question

这是我的 html(所有 li 和 span 都是动态生成的)

<div id="VMScrollBoth1" class="sliderGallery">
        <ul>
            <li class="VMScrollBoth handle6"><span><a href="#"><img src="imagex.png"></a></span></li>
            <li class="VMScrollBoth handle6"><span><a href="#"><img src="imagex2.png"></a></span></li>
            <li class="VMScrollBoth handle6"><span><a href="#"><img src="imagex3.png"></a></span></li>
            <li class="VMScrollBoth handle7"><span><a href="#"><img src="imagex4.png"></a></span></li>
            <li class="VMScrollBoth handle7"><span><a href="#"><img src="imagex5.png"></a></span></li>
            <li class="VMScrollBoth handle8"><span><a href="#"><img src="imagex6.png"></a></span></li>
            <li class="VMScrollBoth handle8"><span><a href="#"><img src="imagex7.png"></a></span></li>
            <li class="VMScrollBoth handle8"><span><a href="#"><img src="imagex.png"></a></span></li>
        </ul>
        <div class="slider ui-slider">
            <a href="javascript:void(0)"> <div class="handle"></div></a>
            <span class="slider-lbl1" id="handle8">SIENNA</span>
            <span class="slider-lbl1" id="handle6">CARRIE</span>
            <span class="slider-lbl1" id="handle7">ISABELLE</span>
        </div>
    </div>

我想要的是。在页面加载时，应显示所有 li 元素，但是当我单击具有 id handle8 的 span 时，只有具有类 handle8 的 li 元素才会显示，其余所有 li 元素应该隐藏

我写了下面的代码:

<style>
.gayab {display:none }
</style>
<script type="text/javascript">
 jQuery('.slider-lbl1').live('click',function () { 
      var catID = jQuery(this).attr('id');
      console.log(catID);
      jQuery(this).parent().parent().children('ul').children('li').filter(
         function(index) { 
             if((jQuery(this).hasClass(catID))){
                   jQuery(this).removeClass('gayab');
           } else {
                   jQuery(this).addClass('gayab');
           }
        })
     })
</script>

它在 FF 上工作正常，但在 IE 中无法工作(我有 IE7)，请首先优化我的代码，我知道这是使用 jQuery 的非常复杂的方式，并且还告诉我如何在 IE 中修复 ot
谢谢
更新: VMScrollBoth1 也会动态发布，它可以是 VMScrollBoth2 或 VMScrollBoth99

Answer 1

您可以将其缩短为:

jQuery('.slider-lbl1').live('click',function () {
  $("#VMScrollBoth1 li:not(." + this.id +")").hide();
})​;​

You can give it a try here ，这需要单击的元素的 id ，并找到任何 <li> #VMScrollBoth1下的元素这样做 :not() 有那个 .class ，和 .hide() 是他们。

.hide() / .show() 比仅仅为 display: none; 建立一个类更简单的方法:)

这也是一个适用于 future 点击的版本:

jQuery('.slider-lbl1').live('click',function () {
  $("#VMScrollBoth1 li").show().not("." + this.id).hide();
});​

这显示了所有 <li>然后，元素会在每次单击时再次过滤，允许您单击多个句柄，并且可见列表每次都会更新，you can try it here .