如何隐藏作为锚点一部分的 i 元素

Question

当我点击排序 link 时，class filter-link-active 和 class asc 被添加到锚点。

添加这些class时，classfa-sort（字体真棒）必须隐藏。

会发生什么：他也将所有其他 classes fa-sort 隐藏在其他锚点中！它应该只隐藏当前锚本身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(); 到 select i child of this。

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)select或者selectchildi的this。此方法接受名为 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>

Answer 2

我认为这可以帮助你：

solution in JSF

https://jsfiddle.net/erv0d5u6/82/

如何隐藏作为锚点一部分的 i 元素

how to hide i element which is part of an anchor

javascript

jquery

hide