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 に答える