當屬性的值是什么時如何隱藏數據屬性

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>