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和amp;的非常复杂的方法还告诉我如何在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 display: none;个jQuery('.slider-lbl1').live('click',function () { $("#VMScrollBoth1 li").show().not("." + this.id).hide(); });元素<li>，和:not()他们。

.class / .hide()比仅为{{1}}提供课程更简单的方法：）

这里还有一个适用于未来点击的版本：

{{1}}

这会显示所有{{1}}元素，然后在每次点击时再次过滤，允许您每次点击多个句柄和可见列表更新.hide()。

Answer 2

两个快速点（我写的是评论而不是答案，但我还不能这样做）：

“console”打破了您的IE7 javascript，
如果你将代码复制到你的问题中，“。gayab {di a play：none}”中有一个拼写错误，di A 播放di S play。

...但请参阅其他答案。：）

Answer 3

这是一种更简单的方法，更安全，因为它不使用相对路径：

jQuery('.slider-lbl1').live('click',function () {
    var handle = this.id;
    $('.VMScrollBoth').each(function() {
        $(this).toggle($(this).hasClass(handle));
    });
});

在jQuery中管理来自span的兄弟元素

3 个答案: