javascript - 在 html 数据属性中存储值的最佳方法是什么

Question

如果我想在 html 中的一个数据属性中存储多个值，那么完成它的方法是什么，以及如何使用 jQuery 找到这些值？

在以下情况下，存储值的最佳方法是什么？逗号分隔，空格分隔。

如果我想找到<li>具有 "Mango" 的标签在data-fruit属性中，如何在不使用for循环和if条件的情况下找到它？

<ul class = "Fruits"><li data-fruit="Mango,Apple">Mango And Apple </li><li data-fruit="Mango,Strawberry"> Mango And Strawberry</li><li data-fruit="Apple,Strawberry"> Apple And Strawberry</li>
</ul>

Answer 1

可以将数据以数组的形式持久化，那么就可以使用.data()从元素中获取它。

$('.Fruits li').filter(function() {
  return $(this).data('fruit').includes('Mango');
}).addClass('red')

.red {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="Fruits">
  <li data-fruit="['Mango','Apple']">Mango And Apple </li>
  <li data-fruit="['Mango','Strawberry']"> Mango And Strawberry</li>
  <li data-fruit="['Apple','Strawberry']"> Apple And Strawberry</li>
</ul>

作为替代方案，您可以使用 CSV，并在检索时将其转换为数组

$('.Fruits li').filter(function() {
  return $(this).data('fruit').replace(/ /g, '').split(',').includes('Mango');
}).addClass('red')

.red {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="Fruits">
  <li data-fruit="Mango,Apple">Mango And Apple </li>
  <li data-fruit="Mango,Strawberry"> Mango And Strawberry</li>
  <li data-fruit="Apple,Strawberry"> Apple And Strawberry</li>
</ul>