Question

当我单击排序链接时，类use Joomla\CMS\Toolbar\ToolbarHelper; ToolbarHelper::addNew(string $task, string $alt, boolean $check);和类filter-link-active被添加到锚点。

添加这些类后，必须隐藏类asc（真棒字体）。

发生了什么：他也将所有其他类fa-sort隐藏在其他锚点中！并且它应该仅将 {@ 1}}隐藏在当前锚自身中

fa-sort

a-sort

Answer 1

尝试以下代码段。您可以使用$(this).children('i').hide();选择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)选择器选择i的子项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元素

2 个答案: