Количество классов JQuery в HTML
У меня есть HTML, который получает ввод от пользователей. Моя работа состоит в том, чтобы подсчитывать карты, которые они вводят, и стилизовать эти карты. Карточки помещаются внутрь <section>.
Проблемы: Мой Jquery считает и работает только в одном разделе. Если пользователи заходят более чем в один раздел, код не работает. Мой код ниже показывает, когда пользователи входят в 2 раздела: карты в первом разделе должны быть синими, а карты во втором разделе должны быть красными, но теперь они все синие.
var numCard = $('.cards').length;
if (numCard == "2") {
/* $('.cards').css('color', 'red'); */
$("section .cards").parent().addClass("two-cards");
} else if (numCard == "3") {
$("section .cards").parent().addClass("three-cards");
} else {
$('section .cards').parent().addClass("four-cards");
}body {
padding: 20px;
font-family: Helvetica;
}
.two-cards .cards {
color: red;
}
.three-cards .cards {
color: green;
}
.four-cards .cards {
color: blue;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<div class = "cards">
First Card
</div>
<div class = "cards">
Second Card
</div>
<div class = "cards">
Third Card
</div>
<div class = "cards">
Third Card
</div>
</section>
<p>
<section>
<div class = "cards">
First Card
</div>
<div class = "cards">
Second Card
</div>
</section>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вам нужно просмотреть разделы, а затем использовать ключевое слово this для проверки:
$('section').each(function() {
var numCard = $('.cards', this).length;
if (numCard == "2") {
$(this).addClass("two-cards");
} else if (numCard == "3") {
$(this).addClass("three-cards");
} else {
$(this).addClass("four-cards");
}
});body {
padding: 20px;
font-family: Helvetica;
}
.two-cards .cards {
color: red;
}
.three-cards .cards {
color: green;
}
.four-cards .cards {
color: blue;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<div class = "cards">
First Card
</div>
<div class = "cards">
Second Card
</div>
<div class = "cards">
Third Card
</div>
<div class = "cards">
Third Card
</div>
</section>
<p>
<section>
<div class = "cards">
First Card
</div>
<div class = "cards">
Second Card
</div>
</section>
</p>Привет, Закария Ачарки, большое спасибо. Это хорошо работает!
Не за что, рад, что смог помочь. Если какой-либо ответ поможет вам проголосовать за него, если какой-либо ответ — это то, что вы ищете, отметьте его как правильный ответ Для будущих читателей.
Я только что проголосовал за ваш ответ как за правильный. У меня вопрос: что означает (представляет) «это» в этом коде var numCard = $('.cards', this).length;?
Вы также можете проголосовать ЗА, это будет полезно, что угодно ( Это сокращение от var numCard = $(this).find('.cards').length;
if (numCard == "2")Почему вы принудительно сравниваете целочисленную переменную со строкой?