如何使数据过滤器属性值变量？

Question

我想让li类变量中的数据过滤器值获得更多过滤器选项

    <button class="secondbtn btn btn-sucess  btn-lg dropdown-toggle type=" button" onmousedown="this.size=5;"
        onfocusout="this.size=1;" data-toggle="dropdown"  onclick="yclick()">Select Cat</button>
        <div class=" dropdown-menu edit2" id="dropdownItem" aria-labelledby="dropdownMenuButton">           
            <li class=" dropdown-item box filterListItem item btn " data-filter="Y">Y</li>
            <li class=" dropdown-item box filterListItem item btn " data-filter="C">C</li>  
        </div>



function yclick() {

    $('li.boxY:eq(0)').data('filter', 'malY');
    $('li.boxC:eq(1)').data('filter', 'malC');
    var value = $('li.boxY:eq(0)').data('filter');
    alert(value);
}

Answer 1

要访问或更改元素上的data-*值，可以使用data方法。仅使用属性名称（不带前缀）来读取值，或者传递第二个参数来设置值。因此，在您的情况下，例如：

 var value = $('li.dropdown-item:eq(0)').data('filter');

将阅读第一项并

$('li.dropdown-item:eq(0)').data('filter','foo');

将第一项设置为值“ foo”。下面的演示将在单击时读取li的值，然后单击按钮将对其进行更改。尝试单击两个项目，然后单击按钮，然后再次单击两个项目。

$('ul').on('click','li',function(){
   console.log($(this).data('filter'));
});

$('button').on('click', function(){
    $('ul li:eq(0)').data('filter',"One");
    $('ul li:eq(1)').data('filter',"Two");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li data-filter="A">A</li>
  <li data-filter="B">B</li>
 </ul>
 
 <button>change filters</button>