Jquery 添加和刪除子類

Question

我試圖在單擊選項卡時在頁面上的選項卡旁邊顯示一個 X，但在選項卡之間顯示和隱藏 X. 時遇到問題。 我正在從中獲取父標簽。

$('.tabs .tab-links a').on('click', function(e) {
    var currentValue = $(this).parent('li')
});

我的問題是我在那個 LI 中有一個跨度，我似乎無法訪問其中包含 X 的跨度

<div class="tabs">
  <ul class="tab-links">
    <li>
      <a href="#tab1">Official Rules</a>
        <span class="close hidden">X</span>
    </li>
    <li>
      <a href="#tab2">Privacy Policy</a>
      <span class="close hidden">x</span>
    </li>
    <li>
      <a href="#tab3">Support</a>
      <span class="close hidden">X</span>
    </li>
  </ul>
</div>

當在 LI 標簽中單擊鏈接時，有沒有辦法像removeClass('hidden')一樣添加 X ？

Answer 1

您可以嘗試使用.next("span")來定位下一個A的元素（ SPAN ）
但最好的方法是首先引用父級，然后找到所需的選擇器：

.closest("li").find("span")

在你的例子中：

$('.tabs .tab-links a').on('click', function(e) {
    var $span = $(this).closest('li').find("span");
    $span.toggleClass("hidden"); // OR whatever you want to do with $span
});

因此，首先使用.closest()允許您（美好的一天）更改LI的內部 HTML 並仍然獲得該span即使它不再是.next()到單擊的元素。

Answer 2

您可以使用 jQuery 的siblings並刪除元素的類

$('.tabs .tab-links a').on('click', function(e) {
    $(this).parents("ul").find("span").addClass("hidden");
   $(this).siblings("span").toggleClass("hidden");

}); 

檢查 JS 小提琴

檢查更新的 JS小提琴