javascript - 如何隐藏属于 anchor 的 i 元素

Question

当我单击排序链接时，filter-link-active 类和 asc 类将添加到 anchor 。

添加这些类时，类fa-sort(font Awesome)必须隐藏。

发生了什么:他也将所有其他类 fa-sort 隐藏在其他 anchor 中!它应该仅隐藏当前 anchor 本身中的a-sort

$(document).on('click', '#' + val, function(e) {
  e.preventDefault();
  $('.filter-link.filter-link-active').not(this).removeClass('filter-link-active');
  $(this).toggleClass('filter-link-active');
  $('.filter-link').removeClass('asc desc');

  if (orderClass == 'desc' || orderClass == '') {
    $(this).addClass('asc');
    $('i').closest('.fa-sort').hide(); // hide font awesome icon in acnhor										
    orderClass = 'asc';
  } else {
    $(this).addClass('desc');
    orderClass = 'desc';
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th><a id="name" class="filter-link" href="#">Name<i class="fas fa-sort"></i></a></th>
      <th><a id="modified" class="filter-link filter-link-number" href="#">Modified<i class="fas fa-sort"></i></a></th>
      <th><a id="size" class="filter-link filter-link-number" href="#">Size<i class="fas fa-sort"></i></a></th>
      <th><a id="share" class="filter-link filter-link-number" href="#">Share<i class="fas fa-sort"></i></a></th>
      <th><a id="view" class="filter-link filter-link-number" href="#">View<i class="fas fa-sort"></i></a></th>

    </tr>
  </thead>
</table>

Answer 1

尝试下面的代码片段。您可以使用 $(this).children('i').hide(); 来选择 i child of 这个。

var orderClass = '';

$("#name").click(function() {
  if (orderClass == 'desc' || orderClass == '') {
    $(this).addClass('asc');
    $(this).children('i').hide(); // hide font awesome icon in acnhor										
    orderClass = 'asc';
  } else {
    $(this).addClass('desc');
    orderClass = 'desc';
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<table>
  <thead>
    <tr>
      <th><a id="name" class="filter-link" href="#">Name<i class="fas fa-sort"></i></a></th>
      <th><a id="modified" class="filter-link filter-link-number" href="#">Modified<i class="fas fa-sort"></i></a></th>
      <th><a id="size" class="filter-link filter-link-number" href="#">Size<i class="fas fa-sort"></i></a></th>
      <th><a id="share" class="filter-link filter-link-number" href="#">Share<i class="fas fa-sort"></i></a></th>
      <th><a id="view" class="filter-link filter-link-number" href="#">View<i class="fas fa-sort"></i></a></th>

    </tr>
  </thead>
</table>

或者您可以使用$("i", this)选择器来选择this的子i。此方法接受名为 context 的第二个参数。 .

var orderClass = '';

$("#name").click(function() {
  if (orderClass == 'desc' || orderClass == '') {
    $(this).addClass('asc');
    $("i", this).hide(); // hide font awesome icon in acnhor										
    orderClass = 'asc';
  } else {
    $(this).addClass('desc');
    orderClass = 'desc';
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<table>
  <thead>
    <tr>
      <th><a id="name" class="filter-link" href="#">Name<i class="fas fa-sort"></i></a></th>
      <th><a id="modified" class="filter-link filter-link-number" href="#">Modified<i class="fas fa-sort"></i></a></th>
      <th><a id="size" class="filter-link filter-link-number" href="#">Size<i class="fas fa-sort"></i></a></th>
      <th><a id="share" class="filter-link filter-link-number" href="#">Share<i class="fas fa-sort"></i></a></th>
      <th><a id="view" class="filter-link filter-link-number" href="#">View<i class="fas fa-sort"></i></a></th>

    </tr>
  </thead>
</table>