基于类变化的触发函数答案

【问题标题】：Trigger function based on Class Change基于类变化的触发函数
【发布时间】：2012-03-07 21:01:17
【问题描述】：

我有以下。我正在尝试根据 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 区域中的哪一个而有所不同。

【问题讨论】：

"cssClassChanged" 是一个有效的 HTML 事件吗？
页面加载后如何更改类？ @Diodeus 你可以在 jQuery 中定义自定义事件
@Diodeus。但是你可以自己检测到，看我的回答。
你手动触发了一个非原生事件，每次对事件的目标进行css类更改时，你应该手动重新触发非原生事件。
是的 - 轮询更改会起作用，但有可能会占用大量 CPU。

标签： javascript jquery class dom triggers

【解决方案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);

【讨论】：

感谢您的回答，我已尝试对其进行调整并编辑了上面的问题以显示它。不过，我还是做错了。
@MichaelDavis。当 DOM 准备好时，您是否调用了该函数...？查看我的更新
没有像我那样将它包装在 document.ready 函数中吗？对不起，如果这是一个白痴问题......我只知道危险。
@MichaelDavis。 jQuery(checkForChanges) === jQuery(document).ready(function(){checkForChanges();}) 只是更短...
当然！大声笑现在它按预期工作。感谢您在这方面的坚持。

【解决方案2】：

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

【讨论】：

是的，我并不是要创建自己的自定义事件，只是试图从其他地方找到的另一个答案中进行调整。我已经更新了这个问题，以反映我认为包含您和其他人所说的内容的新方向。我在正确的轨道上吗？

【解决方案3】：

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

【讨论】：

感谢您的反馈。当滑块更改幻灯片时，类会更改。每张幻灯片都有一个带有给定 ID 的图像，并且类会根据可见的图像而变化。我试图尝试一个新的方向。我离得更近了吗？
在每张幻灯片上，紧跟在addClass 之后，使用$("#slider-banner").trigger("cssClassChanged") 并使用您的原始代码。这样，每次滑块滑动并且类发生变化时，都会触发代码。

【解决方案4】：

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

在您的事件侦听器中，您可以检查 css-class 以获取您感兴趣的任何元素。

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

【讨论】：