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

Question

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

如果我通过 data-id 悬停在父菜单上，我有代码可以向子菜单添加一些 class。这行得通。但是子菜单可能有多个父 data-id 值 (data-id="3,2)。如果我将鼠标悬停在所有父菜单上，我需要添加 class。

$('.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>

如果我将鼠标悬停在具有多个数据 ID 值的所有子菜单上，则需要添加 class

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'));
});

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

Match comma separated data-attribute values

jquery

custom-data-attribute