当属性的值是什么时如何隐藏数据属性

Question

当按钮的值等于“工作订单”时，我想隐藏链接字段按钮，请参见下图。

我的 HTML 代码：

我试过这个$("li[data-label='Work Order']").hide()但没有用。

Answer 1

li与具有data-label属性的元素不同。 如果要将<a>隐藏在里面，请使用选择器字符串a[data-label='Work%20Order'] ：

 $("a[data-label='Work%20Order']").hide()

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a data-label="Work%20Order">link</a>

您确实需要在选择器中使用%20 。

如果你想总是隐藏这样的元素，你可以单独使用 CSS 来实现 - 根本不需要 jQuery 或任何 Javascript。 使用相同的选择器字符串加上display: none ：

 a[data-label='Work%20Order'] { display: none; }

 <a data-label="Work%20Order">link</a>

如果要在其子项之一具有这样的属性时隐藏整个<li>容器，请使用 jQuery 选择每个元素并在其上调用.parent() ：

 $("a[data-label='Work%20Order']").parent().hide();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li> <a data-label="Work%20Order">link</a> </li> <li> <a>link 2</a> </li> <li> <a data-label="Work%20Order">link 3</a> </li> </ul>