#html #jquery #css #bootstrap-4
#HTML #jquery #css #bootstrap-4
Вопрос:
Я хочу, чтобы, когда пользователь нажимает на значок сердца, значок сердца скрывается, а отображается значок, заполненный сердцем. Как мне обратиться к другому значку в моей функции jQuery, чтобы изменить его «отображение» с «нет» на «показано»? Я знаю, что этот пример действительно неправильный, это просто идея того, что я хочу сделать, и я не могу понять это.
$('.heart-icon').click(function(){
$('.heart-icon').hide();
$('.heart-filled-icon').show();
}); <svg width="1em" height="1em" viewBox="0 0 16 16" class="heart-icon bi bi-heart" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg>
<svg width="1em" height="1em" style ="display:none;" viewBox="0 0 16 16" class="heart-filled-icon bi bi-heart-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
</svg> Комментарии:
1. используйте .toggle() для отображения и скрытия или .hide(), чтобы просто скрыть и .show(), чтобы просто показать
2. просто обратитесь к .classname или #idname, например $(«#idname»).show();
Ответ №1:
Есть много разных способов, которыми вы можете это сделать…
Один из способов — переключать классы отображения начальной загрузки. Сначала поместите либо d-none или d-block в классы SVG.
$('.bi').click(function(){
$('.bi').toggleClass('d-none d-block');
})
Комментарии:
1. Спасибо, это работает! Но у меня есть несколько экземпляров значков. Когда я нажимаю на один значок, все они отображаются / скрыты. Я попытался использовать $(this). toggleClass(‘d-none d-block’);}) но это не сработало.