Question

我已经碰壁了，需要一些指导才能让它发挥作用。我的前言是我是一个jQuery的菜鸟，我可以用任何方式编写我已经写好的内容，或者更精简的内容当然是受欢迎的。

目前我在页面上有2个滑块。每个图像都有一个独特的类。当用户点击图像滑块时，图像会滑入，并将“activeSlide”类添加到其中。我想要发生的是当用户点击滑块并且图像加载与另一个图像匹配时，会弹出一个警告。将有不同的图像组合将触发弹出窗口，如果没有匹配，则不会发生任何事情。

目前使用以下代码可以工作，但是在图像匹配并且用户再次单击滑块后触发警报。理想的情况是用户单击图像滑块，新图像加载，如果匹配则调用事件处理程序以弹出警报。

这是我的HTML：

<div id="top" class="Slider">
    <img class="rsImg" src="images/tShirtRed.png" alt="tShirtRed" />
    <img class="rsImg" src="images/tShirtGreen.png" alt="tShirtGreen" />
    <img class="rsImg" src="images/tShirtRed.png" alt="tShirtRed" />
</div>


<div id="bottom" class="Slider">
    <img class="classBottom1" src="images/image5.png" alt="" />
    <img class="classBottom2" src="images/image6.png" alt="" />
    <img class="classBottom3" src="images/image6.png" alt="" />
</div>

这是我的jQuery：

var sliderInstance = $("#chest").data('royalSlider');

    sliderInstance.ev.on('rsAfterSlideChange', function() {
            if (($('#chest .rsActiveSlide img').attr('alt') == 'tShirtGreen') && ($('#legs .rsActiveSlide img').attr('alt') == 'jeansGreen')) {
            alert('Your message');
            } else {
            //Do nothing
            }
    });

我的开发环境在这里：http://beingproperties.com/match-game/

提前感谢您，感谢任何意见。干杯 -Chris

Answer 1

在RoyalSlider的开发人员的帮助下计算出来：Royal Slider

jQuery需要在滑块初始化之后和document.ready（）函数中。

我还需要重新安排我试图调用的功能。请参阅上面的固定代码。

再次感谢RoyalSlider的德米特里！ -Chris

新映像加载时的触发器功能，使选择器与If / else语句匹配

1 个答案: