Question

如果将鼠标悬停在其父菜单上，则需要将类添加到所有子菜单中。

如果我通过data-id将鼠标悬停在父菜单上，则我具有将某些类添加到子菜单的代码。这可行。但是子菜单可能具有多个父data-id（data-id =“ 3,2）的值。如果将鼠标悬停在所有父菜单上，则需要添加类。

$('.menu__list li a[data-id]').hover(function() {
  $('.menu__subcategory li a').addClass('inactive').removeClass('child');
  $('.menu__subcategory li a[data-id=' + $(this).attr('data-id') + ']').addClass('child').removeClass('inactive');
}, function() {
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu__list">
  <li><a href="#" data-id="1">Menu 1</a></li>
  <li><a href="#" data-id="2">Menu 2</a></li>
  <li><a href="#" data-id="3">Menu 3</a></li>
</ul>

<ul class="menu__subcategory">
  <li><a href="#" data-id="1">Submenu 1</a></li>
  <li><a href="#" data-id="2">Submenu 1</a></li>
  <li><a href="#" data-id="2">Submenu 1</a></li>
  <li><a href="#" data-id="3,2">Submenu 1</a></li>
</ul>

如果我将鼠标悬停在具有多个data-id值的所有子菜单上，则需要添加类

Answer 1

要执行此操作，可以将存储在data属性中的值转换为数组。然后，在hover()函数中，您可以使用filter()确定是否id 子类别includes()的数组，其父值已被悬停。试试这个：

$('.menu__list li a[data-id]').hover(function() {
  var $aHover = $(this);
  $('.menu__subcategory li a').addClass('inactive').removeClass('child').filter(function() {
    return $(this).data('id').includes($aHover.data('id'));
  }).addClass('child').removeClass('inactive');
}, function() {
  // presumably you've omitted some logic here, or this can be removed.
});

.child {
  background-color: yellow;
}

.inactive {
  background-color: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu__list">
  <li><a href="#" data-id="1">Menu 1</a></li>
  <li><a href="#" data-id="2">Menu 2</a></li>
  <li><a href="#" data-id="3">Menu 3</a></li>
</ul>

<ul class="menu__subcategory">
  <li><a href="#" data-id="[1]">Submenu 1</a></li>
  <li><a href="#" data-id="[2]">Submenu 1</a></li>
  <li><a href="#" data-id="[2]">Submenu 1</a></li>
  <li><a href="#" data-id="[3,2]">Submenu 1</a></li>
</ul>

Answer 2

尝试以下代码

$(".menu__subcategory > li a[data-id]").each(function(){
  console.log($(this).attr('data-id'));
});

$(".menu__list > li a[data-id]").each(function(){
  console.log($(this).attr('data-id'));
});

要遍历所有data-id属性，请使用以下方法：

$("a[data-id]").each(function(){
  console.log($(this).attr('data-id'));
});

Answer 3

您可以这样做：

$('.menu__list li a[data-id]').hover(function() {
  var id = $(this).data('id');
  $('.menu__subcategory li a')
    .addClass('inactive').removeClass('child')
    .filter(function() {
      return (',' + $(this).data('id') + ',').indexOf(',' + id + ',') >= 0;
    })
    .addClass('child').removeClass('inactive');
}, function() {
  // remove classes here perhaps?
});

.child {
  background: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu__list">
  <li><a href="#" data-id="1">Menu 1</a></li>
  <li><a href="#" data-id="2">Menu 2</a></li>
  <li><a href="#" data-id="3">Menu 3</a></li>
</ul>

<ul class="menu__subcategory">
  <li><a href="#" data-id="1">Submenu 1</a></li>
  <li><a href="#" data-id="2">Submenu 1</a></li>
  <li><a href="#" data-id="2">Submenu 1</a></li>
  <li><a href="#" data-id="3,2">Submenu 1</a></li>
</ul>

匹配逗号分隔的数据属性值

3 个答案: