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

Question

如果将鼠标悬停在父母菜单上，则需要为所有子菜单添加课程。

如果我通过data-id悬停在父菜单上，我有代码将一些类添加到子菜单。这很有效。但子菜单可能有多个父数据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'));
});