Как я могу найти класс внутри кнопки> span с помощью jQuery?

#jquery

Вопрос:

Я хочу изменить значок, когда пользователь нажимает кнопку, поэтому сначала мне нужно найти, какой значок имеет кнопка, определяемая именем класса.

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

В настоящее время я тестирую, показывая предупреждение, если у span есть правильный класс, но это не предупреждение. Что я делаю не так?

HTML

 <button class="btn btn-primary">
    <span class="fa fa-user-plus text-muted"></span>
</button>

jQuery

 $(document).on('click', '.follow', function(e) {
    var button = $(this);

    if(button.find('span').hasClass('fa-user-plus')) {
        alert();
        // won't alert!
    }
});

Редактировать

Следующий код работает; Я могу изменить значок на счетчик, поэтому я знаю, что нацеливание на кнопку> span правильное. Я просто не могу определить, какой класс имеет span.

 button.find('span').removeClass('fa-user-plus').addClass('fa-spinner fa-spin');

1. Где находится обработчик события нажатия кнопки? Вам действительно этого не хватает или вы просто не показываете это здесь?

2. @NawedKhan Я обновил свой вопрос

3. Что такое «.follow»? у кнопки нет класса с именем «следовать».

Ответ №1:

Вы неправильно получаете дескриптор кнопки — $ (this) дает вам дескриптор DOM, а не кнопки. jQuery $(this) имеет разные значения в разных контекстах. Вы можете получить дескриптор кнопки, используя идентификатор, например. Смотрите следующий рабочий фрагмент.

Редактировать:

Я только что прочитал ваш комментарий. Доступ к вашей кнопке с идентификатором был просто примером. Вы также можете получить к нему доступ с помощью классов CSS. Например. $('.btn.btn-primary') . Смотрите отредактированный фрагмент ниже.

 if($('.btn.btn-primary').find('span').hasClass('fa-user-plus')) {
    console.log("found");
    // won't alert!
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-primary">
    <span class="fa fa-user-plus text-muted"></span>
</button>

1. Я не могу настроить таргетинг на них по идентификатору, так как одна и та же кнопка с одинаковым идентификатором может появляться на странице пару раз.

2. У вас не должно быть нескольких элементов с одинаковым идентификатором. Идентификатор должен быть уникальным для каждой страницы.

3. @NawedKhan Вот почему я ориентируюсь на них по классам.

4. да, но где вы запускаете нажатие кнопки? «это» ничего не значит в вашем текущем контексте.

5. На самом деле я делал что-то действительно глупое ранее в коде: я удалял fa-user-plus класс, из-за чего он не работал * facepalm *. Я отдаю вам должное, потому что вы ответили на него первым. 🙂

Ответ №2:

Добавьте класс «follow» к кнопке и используйте его в качестве триггера:

HTML:

 <button class="btn btn-primary follow">
    <span class="fa fa-user-plus text-muted"></span>
</button>

JQUERY:

 $(document).on('click', '.follow', function(e) {
    var button = $(this);

    if(button.find('span').hasClass('fa-user-plus')) {
        alert('hi');
        // won't alert!
    }
});

Ответ №3:

Попробуйте это, я надеюсь, это поможет вам. Спасибо

 $('.btn').click(function() {
  var child = $(this.children)
  if(child.hasClass('fa-user-plus')) {
    child.removeClass('fa-user-plus').addClass('fa-spinner fa-spin');
  }
})

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-primary">Button
    <span class="fa fa-user-plus text-muted"></span>
</button>