JQuery: нельзя условно добавить класс к дочерним элементам

Я пытаюсь условно добавить класс «закрытый-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 -->

Большое вам спасибо за вашу помощь!

Ни один из входов в .summon-next-element.on-sub-level не проверяется. Таким образом, он удалит класс, а не добавит его.

— 14.12.2020 07:12

Если вход не проверен, он должен удалить класс «open-3», но вместо этого должен добавить класс «closed-3». Тоже не идет....

— 14.12.2020 07:20

вам нужно дополнительно обернуть код в проверяемое событие для переключателей

— 14.12.2020 07:30

@sergeykuznetsov, да, похоже, проблема с переключателями, так как они отлично работают с флажками. Как обернуть код в проверенное событие? извини...

— 14.12.2020 07:49

@BenViatte, я дал тебе решение. Проверьте, пожалуйста.

— 14.12.2020 08:09

@BenViatte, хотели получить такой результат?

— 14.12.2020 08:20

Большое вам спасибо, благодаря вашей помощи и другим здесь, я наконец установил рабочую версию. Большая благодарность.

— 15.12.2020 14:17

html jquery children

14.12.2020 07:06

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

133

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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 -->

Спасибо. Кажется, что это немного дальше, но все равно не добавляются ни открытые, ни закрытые классы....

— 14.12.2020 07:20

$("selector1").is("selector2") истинно, если любой из элементов, выбранных selector1, удовлетворяет selector2, а не только первый.

— 14.12.2020 07:22

@BenViatte Я не понимаю вас, если вы запустите демо и проверите входы, вы увидите, что к ним добавляются закрытые или открытые

— 14.12.2020 07:23

Вы правы, похоже, это работает на фрагменте кода, но по какой-то причине на моем сайте это не работает... просто чтобы все усложнить...

— 14.12.2020 07:49

14.12.2020 07:15

Ответ принят как подходящий

Также необходимо завернуть свою логику в событие выбора радиокнопки, по которому будет происходить сокращенное присвоение/удаление классов:

$(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 -->

14.12.2020 08:08

Другие вопросы по теме

Извлеките данные из массива с помощью jQuery или JavaScript

Свернуть лоток, когда другой лоток расширяется с помощью jquery

Изменить текст элемента <summary> при нажатии

Как отслеживать идентификаторы строк таблиц, созданных путем установки флажка, когда они могут быть удалены случайным образом

Как обновить количество мини-корзины Woocommerce? 400 Ошибка: неверный запрос

Как потоковые сайты отображают информацию о видео в браузере

Фильтр данных без отображения всех элементов по умолчанию

Проблема с загрузкой данных из файла JSON в таблицу HTML с помощью функции js

Просто отправьте пользователя по URL-адресу на основе его ВАРИАНТА ВЫБОРА только при нажатии кнопки ОТПРАВИТЬ

Добавить элементы localstorage в массив javascript

JQuery: нельзя условно добавить класс к дочерним элементам

Ответы 2

Другие вопросы по теме

Похожие вопросы