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

Question

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

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

如果我想找到在 data-fruit 属性中具有 "Mango" 的 <li> 标签，我如何在不使用 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>

Answer 2

你可以有一个字符串。该规范没有为属性中的数据定义任何特定格式，该格式旨在由特定站点处理 JavaScript.

如果你愿意，你的JavaScript可以your_data_attribute_value.split(" ");。

见this example

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

what is the best approach to store values in html data attribute

html

javascript

jquery

custom-data-attribute