Блог

Главная - Вопросы по программированию - jQuery добавляет класс к элементу, когда у него есть определенный другой класс

jQuery добавляет класс к элементу, когда у него есть определенный другой класс

#jquery

#jquery

Вопрос:

Я пытаюсь найти все выпадающие меню на странице, и если у них есть класс «.active» (или «.active.visible»), затем добавьте другой класс «.input-filled»

Это должно быть довольно просто, но я пока не смог заставить его работать.

Я пробовал:

 $('.ui.multiple.search.selection.dropdown.active.visible).addClass('input-filled')

Я думал, что это будет хорошее элегантное решение, но оно не сработало, поэтому я попробовал:

 $('.dropdown').each(function(){
    if($(this).hasClass('visible')){
        $(this).addClass('input--filled'); 
    };
});

Вот некоторые кодовые ссылки моих попыток до сих пор:

http://codepen.io/anon/pen/KgBQxR?editors=1111

http://codepen.io/anon/pen/mAjXpP?editors=1111

Комментарии:

1. Ваш второй код должен работать нормально, проблема в том, что он выполняется только один раз при загрузке страницы. Вам нужно добавить его в прослушиватель, чтобы ваш код знал, когда проверять, виден ли выпадающий список. Независимо от того, какое событие у вас есть, которое добавляет / удаляет класс visible , я бы предложил реализовать добавление / удаление input--filled класса.

2. Почему вы использовали несколько классов подряд в селекторе. Достаточно одного из них. Нравится $('.dropdown.active').addClass('input-filled')

3. @Santi — Ах да, конечно! Спасибо.

4. @Mohammed — Вы правы, я, вероятно, могу использовать меньше, но на странице есть другие выпадающие списки, на которые я не хочу ориентироваться.

5. visible active Кажется, что классы and добавляются (или удаляются) semantic.min.js при действии пользователя… Вы должны посмотреть на инспектор кода и решить, когда и где вы хотите добавить input--filled класс. Вероятно, он будет заменен #input-6 …

Ответ №1:

Обновление: я не обратил пристального внимания на то, что вы спросили. Я проверил API semantic-ui и в итоге получил следующий подход. Надеюсь, вы найдете это полезным. Кстати, если у вас их много на вашей странице, вы можете использовать для них селектор идентификаторов, если они ведут себя по-другому.

 $('.ui.dropdown').dropdown({
    forceSelection: false,
    onShow: function() {
      var $dropDown = $(this);
      $dropDown.addClass("input-filled")
    },
    onHide: function() {
      var $dropDown = $(this);
      $dropDown.removeClass("input-filled")
    }
});

Это CodePen, реализующий этот пример.

Метки: ,