0

我碰壁了，需要一些指导才能使它起作用。我以我是 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/

提前感谢您并感谢您的任何意见。干杯-克里斯

4

1 回答 1

0

在 RoyalSlider 的开发人员的帮助下解决了这个问题：Royal Slider

jQuery 需要在滑块初始化之后并在 document.ready() 函数中。

我还需要重新排列我试图调用的函数。固定代码见上文。

再次感谢 RoyalSlider 的 Dmitry！-克里斯

于 2012-11-10T11:21:54.590 回答