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

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>