javascript - 当属性值为某物时如何隐藏数据属性

Question

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

My HTML code:

我尝试了这个 $("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>