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>

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

有人问我是怎么改变课程的。我正在使用一个滑块，每个幻灯片上都有一个ID为“slider-banner”的div，并且该类会根据我尝试切换背景图像的三个ID'd区域中的哪一个而变化。

Answer 1

没有名为“cssClassChanged”的内置事件。您已创建自己的自定义事件，并在页面加载期间手动触发它。它不会自动触发 - 每次更改CSS类时都必须调用trigger('cssClassChanged')。

Answer 2

没有这样的事件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);

Answer 3

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

Answer 4

您可以在幻灯片显示（上一个/下一个）按钮上连接自己的点击事件监听器 - 除现有按钮外，还会添加它们。

在你的事件监听器中，你可以检查css-class是否有你感兴趣的元素。

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

基于类更改的触发功能

4 个答案: