#html #jquery #children
#HTML #jquery #дети
Вопрос:
Я пытаюсь условно добавить класс «closed-3» ко всем дочерним «входным» элементам предка. Предок должен содержать классы «.summon-next-element.on-sub-sub-level». Однако я не получаю никакого эффекта — ни добавленный класс, ни ошибка в консоли, ничего. Вот jQuery:
$('.summon-next-element.on-sub-sub-level').each(function() {
if ($(this).find("input").is(":checked")) {
$(this).nextAll(".summoned-element").first().find("input").addClass("opened-3").removeClass("closed-3");
} else {
$(this).nextAll(".summoned-element").first().find("input").addClass("closed-3").removeClass("opened-3");
}
}); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="summon-next-element on-sub-sub-level">
<input type="radio" name="frais_renovation" id="frais_renovation_oui" class="oui">
<label for="frais_renovation_oui">oui</label>
</div>
<div class="checkbox">
<input type="radio" name="frais_renovation" id="frais_renovation_non" class="non">
<label for="frais_renovation_non">non</label>
</div>
<div class="summoned-element">
<div class="checkbox info-circle right">
<input type="radio" name="frais_renovation_justificatifs" id="frais_renovation_fichier">
<label for="frais_renovation_fichier">
Mes justificatifs 1
</label>
</div>
<div class="checkbox info-circle right">
<input type="radio" name="frais_renovation_justificatifs" id="frais_renovation_tickets" checked>
<label for="frais_renovation_tickets">
Mes justificatifs 2
</label>
</div>
</div>
<!-- end of summoned element --> Большое вам спасибо за вашу помощь!
Комментарии:
1. Ни один из входных
.summon-next-element.on-sub-levelданных не проверяется. Таким образом, он собирается удалить класс, а не добавить его.2. Если ввод не отмечен, он должен удалить класс «открыт-3», но вместо этого он должен добавить класс «закрыт-3». Это тоже не работает….
3. вам необходимо дополнительно обернуть код в событие checked для переключателей
4. @sergeykuznetsov, да, проблема, похоже, связана с переключателями, поскольку она отлично работает с флажками. Как мне обернуть код в событие checked? извините…
5. @BenViatte, я дал вам решение. Проверьте, пожалуйста.
Ответ №1:
Также необходимо обернуть вашу логику в событие выбора переключателя, в соответствии с которым будет происходить сокращенное назначение / удаление классов:
$(this).on('click', function() { ... }
В вашем коде также была неправильная ссылка на класс.
$('div').find('input[type=radio]').each(function() {
$(this).on('click', function() {
$('input[type=radio]').addClass("closed-3").removeClass("opened-3");
if ($(this).is(":checked")) {
$(this).addClass("opened-3").removeClass("closed-3");
}
});
}); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="summon-next-element on-sub-sub-level">
<input type="radio" name="frais_renovation" id="frais_renovation_oui" class="oui">
<label for="frais_renovation_oui">oui</label>
</div>
<div class="checkbox">
<input type="radio" name="frais_renovation" id="frais_renovation_non" class="non">
<label for="frais_renovation_non">non</label>
</div>
<div class="summoned-element">
<div class="checkbox info-circle right">
<input type="radio" name="frais_renovation_justificatifs" id="frais_renovation_fichier">
<label for="frais_renovation_fichier">
Mes justificatifs 1
</label>
</div>
<div class="checkbox info-circle right">
<input type="radio" name="frais_renovation_justificatifs" id="frais_renovation_tickets" checked>
<label for="frais_renovation_tickets">
Mes justificatifs 2
</label>
</div>
</div>
<!-- end of summoned element --> Ответ №2:
Проблема в том, что вы не перебираете каждый из входных данных, поэтому, когда вы проверяете, проверен ли ввод, он всегда выбирает первый внутри .on-sub-sub-level .
Попробуйте с:
$('.summon-next-element.on-sub-sub-level ~ .summoned-element input').each(function() {
if ($(this).is(":checked")) {
$(this).addClass("opened-3").removeClass("closed-3");
} else {
$(this).addClass("closed-3").removeClass("opened-3");
}
});
ДЕМОНСТРАЦИЯ
$('.summon-next-element.on-sub-sub-level ~ .summoned-element input').each(function() {
if ($(this).is(":checked")) {
$(this).addClass("opened-3").removeClass("closed-3");
} else {
$(this).addClass("closed-3").removeClass("opened-3");
}
}); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="summon-next-element on-sub-sub-level">
<input type="radio" name="frais_renovation" id="frais_renovation_oui" class="oui">
<label for="frais_renovation_oui">oui</label>
</div>
<div class="checkbox">
<input type="radio" name="frais_renovation" id="frais_renovation_non" class="non">
<label for="frais_renovation_non">non</label>
</div>
<div class="summoned-element">
<div class="checkbox info-circle right">
<input type="radio" name="frais_renovation_justificatifs" id="frais_renovation_fichier">
<label for="frais_renovation_fichier">
Mes justificatifs 1
</label>
</div>
<div class="checkbox info-circle right">
<input type="radio" name="frais_renovation_justificatifs" id="frais_renovation_tickets" checked>
<label for="frais_renovation_tickets">
Mes justificatifs 2
</label>
</div>
</div>
<!-- end of summoned element --> Комментарии:
1. Спасибо. Кажется, что это немного дальше, но, тем не менее, открытые или закрытые классы не добавляются….
2.
$("selector1").is("selector2")имеет значение true, если какой-либо из выбранных элементовselector1удовлетворяетselector2, а не только первый.3. @BenViatte Я вас не понимаю, если вы запустите демонстрацию и проверите входные данные, вы увидите, что к ним добавляются закрытые или открытые
4. Вы правы, похоже, это работает с обрезанным кодом, но по какой-то причине на моем сайте этого не происходит… просто чтобы усложнить ситуацию…