Question

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

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

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

<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()从元素中获取数据。

＆＃13;

<?php
    if(isset($_POST['submit_button']))
    {
        if($_POST['name_field'] === "USERA")
        {
           require_once("output.php");
        }
        else
        {
           require_once("wronguser.php");
        }
    }
    else
    {
?>
<html>
    <head>
        <meta charset="UTF-8">
        <title>SAMPLE</title>
    </head>
    <body>
        <form method="POST" action="">
        Username : <input type="text" name="name_field" value="<?php
        if(!isset($_POST['name_field']) || $_POST['name_field']=== "")
        {
        echo "Enter Something" ;
        }
        ?>">
        <input type="submit" name="submit_button" value="SUBMIT BUTTON !">
    </form>
    </body>
</html>
<?php
    }
?>

＆＃13;

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

＆＃13;

.red {
  color: red
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

＆＃13;

.red {
  color: red
}

＆＃13;

Answer 2

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

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

请参阅this example

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

2 个答案: