Добавьте дополнительный класс к тегу с помощью JavaScript
Я планирую отображать заголовок всякий раз, когда пользователь щелкает значок, и при повторном нажатии, в дополнение к скрытию заголовка, также будет меняться цвет фона, чтобы пользователь знал, на какое поле он щелкнул раньше.
Для этого я написал код скрипта, который хорошо показывает и скрывает заголовок, но цвет фона не меняется.
В итоге: Я хочу, чтобы класс .background был добавлен в класс .box_mini, когда заголовок скрыт.
Я использовал этот код, чтобы добавить новый класс к предыдущему классу:
$(document).ready(function () {
$('.box_mini').click(function () {
$(this).toggleClass('background');
});
});
Но я не знаю, что здесь делать?
Мои коды следующие:
let mini = document.querySelector(".box_mini");
document.querySelectorAll('.box_icon').forEach(eye => {
eye.addEventListener("click", function() {
let excerpt = this.parentNode.querySelector(".title_box");
if (this.classList.contains("bi-play-circle-fill")) {
this.classList = "bi bi-power box_icon";
excerpt.style.display = "block";
} else {
this.classList = "bi bi-play-circle-fill box_icon";
excerpt.style.display = "none"
$(mini).ready(function () {
$(this).toggleClass('background');
});
}
});
}); .box_main {
display: flex;
justify-content: space-around;
}
.box_mini {
width: 250px;
height: 200px;
background: #5ec7ff;
box-shadow: 0 0 4px #000;
transition: all 0.5s ease;
}
.box_icon {
font-size: 25px;
margin: 10px 45% 6px;
color: #7f7f7f;
}
.title_box {
font-size: 45px;
margin: 25px 0;
color: #f9ff4d;
text-align: center;
display: none;
}
.background{
background: #c9e955;
transition: all 0.5s ease;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel = "stylesheet" />
<section class = "box_main">
<div class = "box_mini">
<i class = "bi bi-play-circle-fill box_icon"></i>
<h1 class = "title_box">Title BOX</h1>
</div>
<div class = "box_mini">
<i class = "bi bi-play-circle-fill box_icon"></i>
<h1 class = "title_box">Title BOX</h1>
</div>
<div class = "box_mini">
<i class = "bi bi-play-circle-fill box_icon"></i>
<h1 class = "title_box">Title BOX</h1>
</div>
<div class = "box_mini">
<i class = "bi bi-play-circle-fill box_icon"></i>
<h1 class = "title_box">Title BOX</h1>
</div>
</section>$(mini).ready(function () { $(this).toggleClass('background'); }) -> $(this).closest(".box_mini").toggleClass('background'); удалите готовое изворотливое и используйте .closest, чтобы получить родительский .box_mini
Я бы придерживался нативного JS или jQuery. Их смешение приводит к запутанному коду.
Может быть, я не понимаю, что именно вы хотите, но почему вы используете forEach()...?
@Juan, вы можете назначить обработчик события только одному элементу в vanilla-javascript, поэтому вам нужен foreach после document.querySelectorAll, чтобы перебрать каждый элемент в возвращаемой коллекции, чтобы назначить обработчик события. Это не похоже на jquery, который одинаково обрабатывает как коллекции, так и отдельные элементы (коллекции с одним элементом). Вот пример: stackoverflow.com/a/40956816/2181514
В принципе, я не понимал, почему forEach следует использовать в решении, которое должно использовать JQuery. А вот с вашими данными на Vanilla JS понятнее.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Я думаю, вы слишком сильно путаете jQuery с нативным js.
Почему бы просто не придерживаться jQuery вот так?
Редактировать, я бы установил cursor:pointer; на ваш класс .bi, чтобы выделить интерактивный контекст.
$('body').on('click','.bi-play-circle-fill',function(){
$(this).next('.title_box').show();
$(this).removeClass('bi-play-circle-fill').addClass('bi-power');
$(this).parent().addClass('background');
});
$('body').on('click','.bi-power',function(){
$(this).next('.title_box').hide();
$(this).removeClass('bi-power').addClass('bi-play-circle-fill');
$(this).parent().removeClass('background');
});.box_main {
display: flex;
justify-content: space-around;
}
.box_mini {
width: 250px;
height: 200px;
background: #5ec7ff;
box-shadow: 0 0 4px #000;
transition: all 0.5s ease;
}
.box_icon {
font-size: 25px;
margin: 10px 45% 6px;
color: #7f7f7f;
}
.title_box {
font-size: 45px;
margin: 25px 0;
color: #f9ff4d;
text-align: center;
display: none;
}
.background{
background: #c9e955;
transition: all 0.5s ease;
}
.bi{
cursor: pointer;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel = "stylesheet" />
<section class = "box_main">
<div class = "box_mini">
<i class = "bi bi-play-circle-fill box_icon"></i>
<h1 class = "title_box">Title BOX</h1>
</div>
<div class = "box_mini">
<i class = "bi bi-play-circle-fill box_icon"></i>
<h1 class = "title_box">Title BOX</h1>
</div>
<div class = "box_mini">
<i class = "bi bi-play-circle-fill box_icon"></i>
<h1 class = "title_box">Title BOX</h1>
</div>
<div class = "box_mini">
<i class = "bi bi-play-circle-fill box_icon"></i>
<h1 class = "title_box">Title BOX</h1>
</div>
</section>Я пытался сохранить это очень похожим на то, что у вас было раньше. Похоже, вы не получили родительский класс .box_mini для изменения цвета фона.
let mini = document.querySelector(".box_mini");
document.querySelectorAll('.box_icon').forEach(eye => {
eye.addEventListener("click", function() {
let excerpt = this.parentNode.querySelector(".title_box");
let parent = $(this).parent();
if (this.classList.contains("bi-play-circle-fill")) {
this.classList = "bi bi-power box_icon";
excerpt.style.display = "block";
parent.toggleClass('background');
} else {
this.classList = "bi bi-play-circle-fill box_icon";
excerpt.style.display = "none"
parent.toggleClass('background');
}
});
});
Я повторяю свой комментарий, опубликованный по исходному вопросу. Зачем использовать forEach..? В то время как вмешательства по изменению класса выполняются только для элемента, по которому щелкнули...?
document.querySelector(".box_mini")- выбирает только первый элемент с этим классом.$(mini).ready(function ()- это не имеет смысла для начала. Почему произвольный элемент div должен запускать любое «готовое» событие?