js - Когда это правда, сделайте действие. Когда false, отменяет действие

Question

Я пытаюсь добавить класс «pulse» в $ select, когда $ home имеет класс «active», а затем удаляет импульс, когда у дома нет активного, оба могут выполнять не один раз. Функция, которую я, кажется, выполняет один раз, а затем никогда не проверять снова:

$(function() { 
    var $home = $(".tabs-group li:last-child a"); 
    var $choose = $(".tabs-group li"); 

    if($(home).hasClass("active")) { 
    $choose.addClass("pulse"); 
    }; 

    if(!($home).hasClass("active")) { 
     $choose.removeClass("pulse"); 
    }; 
}); 

Я также попытался разбить его на две функции, которые также не работали.

$(function() { 
    var $home = $(".tabs-group li:last-child a"); 
    var $choose = $(".tabs-group .sidebar .menu li"); 
    if(($home).hasClass("active")) { 
    $choose.addClass("pulse"); 
    }; 

}); 

$(function() { 
    var $home = $(".tabs-group li:last-child a"); 
    var $choose = $(".tabs-group .sidebar .menu li"); 
    if(!($home).hasClass("active")) { 
    $choose.removeClass("pulse"); 
    }; 

}); 

Answer 1

Вам необходимо послушать изменения элементов.

$(function() { 
    var $home = $(".tabs-group li:last-child a"); 
    var $choose = $(".tabs-group li"); 

    if($(home).hasClass("active")) { 
    $choose.addClass("pulse"); 
    }; 

    if(!($home).hasClass("active")) { 
     $choose.removeClass("pulse"); 
    }; 

    $(document).on('change', ".tabs-group li:last-child a", function(event){ 
    var $choose = $(".tabs-group li");   
    if $(event.target).hasClass('active') { 
     $choose.addClass('pulse'); 
    } else { 
     $choose.removeClass('pulse'); 
    } 
    }); 
}); 

Answer 2

Это классический вариант использования toggleClass. Пожалуйста, см this example.

(function ($) { 
    var jqueryMap, onClickHome; 

    jqueryMap = { 
    $home : $('.tabs-group li:last-child a'), 
    $choose : $('.tabs-group li') 
    }; 

    onClickHome = function (event) { 
    event.preventDefault(); 
    jqueryMap.$home.toggleClass('active'); 
    jqueryMap.$choose.toggleClass( 
     'pulse', jqueryMap.$home.hasClass('active') 
    ); 
    } 

    jqueryMap.$home.on('click', onClickHome); 
}(jQuery)); 

Обратите внимание, мы используем событие БЕРУЩИХ (щелчок, в данном примере), чтобы переключить «активный» класс, а затем на основе этого установить класс «пульсировать». Все становится немного сложнее, если вы пытаетесь «волшебным образом» изменить класс «пульс» всякий раз, когда «активный» класс изменяется - здесь нет простого решения. Два варианта:

1. Создайте обертку, которая изменяет классы по элементам. Затем вы можете инициировать событие «classChange», когда это вызывается для любого или всех элементов. Это предполагает, что вы управляете кодом и вызовами для изменения класса. Если это так, то вы, вероятно, имеете контроль над тем, что изменяет «активный» класс, и поэтому этот метод, вероятно, не нужен. Однако это может иметь смысл в настройке команды (если вы можете заставить членов вашей команды использовать свою обертку «changeClass»!).

2. Создать событие changeClass event generic. Это не слишком просто, так как в WebKit нет никакого родного события, поэтому ваш элемент должен быть опрошен с некоторым интервалом. См this discussion.

Вы могли бы пожелать рассмотреть ваши CSS разделяет пространства имен, чтобы избежать столкновений с другими библиотеками :)