Как скрыть элемент i, который является частью якоря

Когда я нажимаю на ссылку сортировки, класс filter-link-active и класс asc добавляются к привязке.

Когда эти классы добавляются, класс fa-sort (шрифт awesome) должен быть скрыт.

Что происходит: он прячет все остальные классы 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>

Я сделал тебе фрагмент. Пожалуйста, добавьте любой набор orderClass и примеры строк для сортировки в минимальный воспроизводимый пример

— 02.03.2019 18:05

Что такое val в первой строке? - пожалуйста, потратьте НЕМНОГО больше времени на то, чтобы дать нам правильный код, чтобы помочь вам

— 02.03.2019 18:09

val — это целое число, 0, 1, 2… Проблема в этой строке: $('i').closest('.fa-sort').hide(); Она должна скрывать i с классомfa-sort в одном анкоре, а не во всех анкорах

— 02.03.2019 18:10

И это целое число устанавливается где?

— 02.03.2019 18:11

целые числа задаются в таблице, и он считывает ibtegers для сортировки. Но сортировать не проблема. Только скрыть значок шрифта awesome при сортировке. Поэтому, если класс asc добавляется к якорю после клика, скройте i с классом fa-sort в том же якоре. Это главный вопрос!

— 02.03.2019 18:14

Какой элемент вы нажимаете в своем HTML?

— 02.03.2019 18:15

минимальный воспроизводимый пример или я даже не буду смотреть на код

— 02.03.2019 18:25

javascript jquery hide

02.03.2019 18:02

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Попробуйте приведенный ниже фрагмент. Вы можете использовать $(this).children('i').hide();, чтобы выбрать iребенок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. Этот метод принимает второй параметр с именем контекст.

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>

$(this).children('i').hide(); было именно то, что я искал! Теперь он отлично работает. спасибо

— 02.03.2019 18:36

@mudrayakatusha Добро пожаловать. Я всегда рад помочь. Удачи с вашим проектом!

— 02.03.2019 18:37

02.03.2019 18:25

Я думаю, что это может помочь вам:

solution in JSF

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

02.03.2019 19:16