Javascript 基于类变化的触发函数

我有以下几点。我试图根据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');

jQuery（文档）.ready（函数（）{
jQuery（“#slider banner”）.bind（“cssClassChanged”，function（）{
log（“我在这里！”）；
if（jQuery（“#slider banner”）.hasClass（'living-nutrients'））
{
jQuery（“#home middle first”）.css（“背景图像”、“url（[图像路径]）”）；
}
else if（jQuery（#slider banner”）.hasClass（'right-partner'））
{
jQuery（“#home middle second”）.css（“背景图像”，“url（[图像路径]）”）；
}
else if（jQuery（“#slider banner”）.hasClass（'with-you'））
{
jQuery（“#home middle third”）.css（“背景图像”、“url（[图像路径]）”）；
}
});
jQuery（“#slider banner”）.trigger（'cssClassChanged'）；

colsole在页面加载时显示my console.log消息，但在页面加载后类再次更改时不会显示。有人看到我做错了什么吗

更新：

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

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

所以我明白了“cssClassChanged”是不合法的…我试图修改我在其他地方找到的答案…我确实意识到如果jQuery是一种武器，我会很危险！（知道这是成功的一半，对吧？）

我尝试改编gdoron的链接如下：

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

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

jQuery（文档）.ready（函数（）
{
函数checkForChanges（）
{
if（jQuery（“#slider banner”）.hasClass（'living-nutrients'））
{
jQuery（“#home middle first”）.css（“背景图像”、“url（[图像路径]）”）；
}
else if（jQuery（#slider banner”）.hasClass（'right-partner'））
{
jQuery（“#home middle second”）.css（“背景图像”，“url（[图像路径]）”）；
}
else if（jQuery（“#slider banner”）.hasClass（'with-you'））
{
jQuery（“#home middle third”）.css（“背景图像”、“url（[图像路径]）”）；
}
其他的
设置超时（检查更改，500）；
}
});

不过，我还是遗漏了一些东西。它只适用于页面加载的第一个类

---

有人问我如何更改类。我使用一个滑块，每张幻灯片上都有一个ID为“sliderbanner”的div根据我试图切换背景图像的下面三个ID区域中的哪一个，类会有所不同。

我知道没有

cssClassChanged

事件，您需要手动触发它。但是，您没有在发布的代码中更改类，因此我不确定您要在哪里触发重新启动它。

没有名为“cssClassChanged”的内置事件。您已经创建了自己的自定义事件，并在页面加载过程中手动触发它。它不会自动触发——您必须调用

触发器（'cssClassChanged'）

每次更改CSS类时。

没有此类事件

cscsclasschanged

我认为这可以解释所有

10小时前，我回答了如何检测班级变化，请阅读我的回答

---

更新：

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

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

---

您可以在幻灯片放映（上一个/下一个）按钮上连接自己的单击事件侦听器-它们将添加到现有按钮之外

在事件侦听器中，您可以检查css类中您感兴趣的任何元素

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

---

“cssClassChanged”是否为有效的HTML事件？加载页面后如何更改类？@Diodeus您可以在中定义自定义事件jQuery@Diodeus.但是你可以自己检测，看看我的答案。如果你手动触发一个非本机事件，你应该在每次对事件目标进行css类更改时手动重新触发该非本机事件。Yep-polling for changes会起作用，但有占用CPU的危险。我很感激你的回答，我已经尝试对它进行了修改，并编辑了上面的问题来显示它。不过我仍然做了一些错误的事情。@MichaelDavis。你在DOM就绪时调用过该函数吗…？看到我的更新了吗？它没有包装在文档中。就绪函数像我一样你必须这样做吗？如果这是一个愚蠢的问题，很抱歉……我只知道足够危险。@MichaelDavis。

jQuery（checkForChanges）

==

jQuery（document）。准备好（函数（）{checkForChanges（）；}）

就这么短……当然！哈哈，现在它已经按预期工作了。谢谢你坚持我的观点。是的，我不是要创建自己的定制活动，只是尝试根据其他地方找到的另一个答案进行调整。我更新了问题，以反映我认为包含了你和其他人所说内容的新方向。我走对了吗？感谢您的反馈。当滑块更改幻灯片时，类会更改。每张幻灯片都有一个带有给定ID的图像，并且类会根据可见的图像而更改。我尝试尝试了一个新的方向。我是否更接近了？在每张幻灯片上，在

addClass

之后，使用

$（“#滑块横幅”）。触发器（“cssClassChanged”）

并使用原始代码。这样，每当滑块滑动且类发生更改时，代码都会被触发。