jquery не найти элементы в области кнопок - PullRequest
0 голосов
/ 25 апреля 2020

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

HTML:

<button type="button" id="imageCover1" class="btn btn-sm btn-success btn-image-cover" data-id="1">
     <i class="far fa-circle"></i> cover
</button>
<input type="hidden" name="is_cover[]" id="imageCover1" class="image-cover" value="">

<button type="button" id="imageCover2" class="btn btn-sm btn-success btn-image-cover" data-id="2">
     <i class="far fa-circle"></i> cover
</button>
<input type="hidden" name="is_cover[]" id="imageCover2" class="image-cover" value="">

JS:

$(document).on('click', '.btn-image-cover', function () {
    var item_id = $(this).attr('data-id');
    $('.image-cover').val('');
    $('#imageCover' + item_id).val('1');
    $('#imageCover' + item_id).find('i').addClass('far fa-check-circle');
});

В действии сработало и измените входное значение true Но когда мне нужно найти i и изменить / добавить класс jquery, не найти i. как решить эту проблему?

1 Ответ

2 голосов
/ 25 апреля 2020

Это на самом деле работает.

Проблема в том, что шрифт awesome отображает только один класс значков. Измените функцию addClass на toggleClass следующим образом:

$(document).on('click', '.btn-image-cover', function () {
    var item_id = $(this).attr('data-id');
    $('.image-cover').val('');
    $('#imageData' + item_id).val('1');
    $('.btn-image-cover').not(this).find('i').removeClass('fa-check-circle').addClass('fa-circle');
    $(this).find('i').toggleClass('fa-circle fa-check-circle');
});

JSFiddle link

toggleClass удалит класс "fa-circle", когда он присутствует, и добавит Класс "fa-check-circle", если он отсутствует, и наоборот.

Как отмечает @Teemu, у вас также есть идентификаторы с вашими (кнопка + вход: скрытый) парами. Я изменил идентификатор ввода: скрытый, чтобы начать вместо «imageData».

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...