Question

我有以下代码，我想根据鼠标悬停显示/隐藏不同的文本。我正在使用data-global-id值并希望遍历item-list的子项并隐藏除指定值之外的所有值（例如data-global-id = 1的item-1）：

<script>
  $(document).ready(function() {
    $('.item-list').hide();
    $('.h').mouseover(function() {
      // need to hide everything but the 1 or 2
      var id = $(this).data('global-id');
      var chil=$('.item-list').children();
      $.each(chil, function(i,v){
        alert(i);
        console.log(v);
      });
    });
  });
</script>

<style>
.h{
  width: 200px;
  border: 1px solid red;
}
</style>

<ul>
    <li><div class='h' data-global-id="1">Client 1</div></li>
    <li><div class='h' data-global-id="2">Client 2</div></li>
</ul>

<ul class="item-list">
    <li class="item-1">
        Lorem ipsum jtjtjt, etc...
    </li>
    <li class="item-2">
        Lorem ipsum, etc...
    </li>                      
</ul>

我如何在每个循环中指定隐藏所有内容并只显示item + data-global-id值？是否有更好/更简单的方法来做到这一点？

THX

Answer 1

我不完全确定这是否是你想要的，但无论如何我都会试一试，

由于您已经在项目中使用了jQuery，因此可以根据data-global-id值进行直接搜索，如下所示

//Provide the same global-id key to each .item-list member
//Then do the following in your mouse over func
 var id = $(this).data('global-id');
 var chil=$('.item-list').children().show().
             not('[data-global-id="'+ id +'"]').hide();

编辑 - 小提琴添加

查看小提琴here

想要在jQuery迭代中只显示/隐藏指定的元素

1 个答案:

编辑 - 小提琴添加