javascript - 基于Class Change的触发函数

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 消息，但在页面加载后类再次更改时不会显示。有人看到我做错了什么吗？

更新:

所以我了解到“cssClassChanged”是不合法的...我试图改编我在其他地方找到的答案...我确实意识到如果 jQuery 是一种武器，我会很危险! (知道这是成功的一半，对吧？)

我尝试改编 gdoron 的 answer链接如下:

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

不过，我仍然缺少一些东西。它仅适用于页面加载的第一类。

有人问我如何更改类(class)。我使用的是 slider ，每张幻灯片上都有一个 ID 为“slider-banner”的 div，类根据我尝试为其切换背景图像的下面三个 ID 区域中的哪一个而有所不同。

Answer 1

没有这样的事件 cssClassChanged 我认为这解释了所有...

10 小时前我回答了如何检测类更改，请阅读我的回答 there

---

更新:

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);