如何使数据过滤器属性值可变?

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>