基于类更改的触发function

我有以下内容。 我试图根据css类更改触发函数，但它不起作用。

 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的答案与以下相关：

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

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

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

Answer 1

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

10个小时前我回答了你如何发现class级变化， 在那里读了我的答案

---

更新：

 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 2

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

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"!! });