Функция запуска на основе изменения класса

Question

У меня есть следующее. Я пытаюсь вызвать функцию, основанную на изменении класса CSS, но она не работает.

<script type="text/javascript">

jQuery(document).ready(function(){

jQuery("#slider-banner").bind("cssClassChanged",function(){
    console.log("I'm Here!");
    if(jQuery("#slider-banner").hasClass('living-nutrients'))
    {
        jQuery("#home-middle-first").css("background-image","url([image path])");
    }
    else if(jQuery("#slider-banner").hasClass('right-partner'))
    {
        jQuery("#home-middle-second").css("background-image","url([image path])");
    }
    else if(jQuery("#slider-banner").hasClass('with-you'))
    {
        jQuery("#home-middle-third").css("background-image","url([image path])");
    }
});

    jQuery("#slider-banner").trigger('cssClassChanged');

Colsole отображает мое сообщение console.log при загрузке страницы, но не при повторном изменении класса после загрузки страницы. Кто-нибудь видит, что я делаю не так?

UPDATE:

Итак, я узнал, что «cssClassChanged» не является законным ... Я пытался адаптировать ответ, который нашел где-то еще ... Я понимаю, что если бы jQuery был оружием, я был бы опасен! (зная, что это полдела, верно?)

Моя попытка приспособить ответ Гдорона , связанный с ниже:

<script type="text/javascript">

jQuery(document).ready(function() 
{
    function checkForChanges()
    {
        if(jQuery("#slider-banner").hasClass('living-nutrients'))
        {
            jQuery("#home-middle-first").css("background-image","url([image path])");
        }
        else if(jQuery("#slider-banner").hasClass('right-partner'))
        {
            jQuery("#home-middle-second").css("background-image","url([image path])");
        }
        else if(jQuery("#slider-banner").hasClass('with-you'))
        {
            jQuery("#home-middle-third").css("background-image","url([image path])");
        }

        else
            setTimeout(checkForChanges, 500);
    }
});
</script>

Я все еще что-то упускаю, хотя. Работает только для первого класса при загрузке страницы.

Кто-то спросил, как я меняю классы. Я использую слайдер, и на каждом слайде есть div с идентификатором «слайдер-баннер», и класс меняется в зависимости от того, для какой из трех идентифицированных областей под ним я пытаюсь переключить фоновое изображение.

Answer 1

Нет встроенного события с именем "cssClassChanged".Вы создали свое собственное пользовательское событие и запускаете его вручную во время загрузки страницы.Он не сработает автоматически - вам придется вызывать trigger('cssClassChanged') каждый раз, когда вы меняете класс CSS.

Answer 2

Нет такого события cssClassChanged Я думаю, это все объясняет ...

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

---

Обновление:

function checkForChanges()
{
    var sliderBanner = jQuery("#slider-banner");
    if(sliderBanner.hasClass('living-nutrients'))
    {
        jQuery("#home-middle-first").css("background-image","url([image path])");
    }
    else if(sliderBanner.hasClass('right-partner'))
    {
        jQuery("#home-middle-second").css("background-image","url([image path])");
    }
    else if(sliderBanner.hasClass('with-you'))
    {
        jQuery("#home-middle-third").css("background-image","url([image path])");
    }    

    setTimeout(checkForChanges, 500);
}

jQuery(checkForChanges);

Answer 3

Нет события cssClassChanged, о котором я знаю, вам нужно запустить его вручную. Тем не менее, вы не меняете класс в опубликованном вами коде, поэтому я не уверен, где вы захотите его вызвать.

Answer 4

Вы можете подключить свой собственный слушатель событий щелчка к кнопкам слайд-шоу (предыдущая / следующая) - они будут добавлены в дополнение к существующим.

в ваших прослушивателях событий вы можете проверить css-класс для любого интересующего вас элемента.

$(".prev").on("click", function() { 
//user has explicitly clicked "prev"!!
});
$(".next").on("click", function() { 
//user has explicitly clicked "next"!!
});