0

自分のサイト用に書いた jquery コードで問題が発生しています。

cloudcarouselプラグインを使用して、作成中の Web サイトのホームページに画像のカルーセルを表示しています。カルーセルの HTML コードは次のとおりです。

    <div id="carousel" style="width:100%; height:100%;overflow:scroll;">
                <img id="sample1image"      alt="sample 1"   class = "cloudcarousel current" src="img/homepage/random1.png" />
                <img id="sample2image"       alt= "sample 2" class = "cloudcarousel left leftrotate" src="img/homepage/random2.png"/>
                <img id="sample3image"     alt = "sample 3" class = "cloudcarousel" src = "img/homepage/random3.png" />
                <img id="sample4image"          alt = "sample 4" class = "cloudcarousel" src = "img/homepage/random4.png" />
                <img id="sample5image"       alt="sample 5" class = "cloudcarousel" src = "img/homepage/random5.png" />
                <img id="sample6image" alt="sample 6"  class = "cloudcarousel right rightrotate" src = "img/homepage/random6.png" />


                <input class = "leftrotate" id="left-but"  type="button" value="" />
                <input class = "rightrotate" id="right-but" type="button" value="" />

                <div class="bubble" id="homepagebubble">
                    <span id="bubbleinnercontainer"><a id="bubbletext" href="#">Sample 1</a></span>
                </div>
            </div>

そして、jquery で次のコードを使用してコードを初期化しました。

        $(document).ready(function() {
            $("#carousel").CloudCarousel({
                xPos : 500,
                yPos : 100,
                xRadius : 400,
                yRadius : -8,
                minScale : 0.8,
                speed : 0.3,
                bringToFront : true,
                buttonLeft : $("input.leftrotate"),
                buttonRight : $("input.rightrotate"),
                altBox : $("#alt-text"),
                titleBox : $("#title-text")
            });
           $('.leftrotate').click(leftRotation);

            $('.rightrotate').click(rightRotation);
         });

そして、ここに私の leftRotation メソッドがあります:

    function leftRotation() {
       $('.bubble').css('display', 'none');

       var nextimage = "";
       var rightimage = "";
       var leftimage = "";
       var nextimageindex = $(currentimage).prev().index();

       rightimageindex = $('.right').index();
       leftimageindex = $('.left').index();
       //increment the indexes
       rightimageindex -= 1;
leftimageindex -= 1;

if (rightimageindex < 0) {
    rightimageindex = rightimageindex + 6;
    //if its out of bounds, then bring it back in range
}
if (leftimageindex < 0) {
    leftimageindex = leftimageindex + 6;
}

rightimage = $('.cloudcarousel').eq(rightimageindex);
leftimage = $('.cloudcarousel').eq(leftimageindex);
$('.right').removeClass('right rightrotate');
$('.left').removeClass('left leftrotate');

rightimage.addClass('right rightrotate');
leftimage.addClass('left leftrotate');


var currentimage = $('.current').attr('id');
currentimage = "#" + currentimage;
if ($(currentimage).prev().index() == -1)//if this is the first image
{
    nextimage = $('.cloudcarousel').eq(5);
    $(currentimage).removeClass('current');
    nextimage.addClass('current');
    $('#bubbletext').text(nextimage.attr('alt'));
} else {

    nextimage = $(currentimage).prev();
    $(currentimage).removeClass('current');
    nextimage.addClass('current');
    $('#bubbletext').text(nextimage.attr('alt'));
}

$('.bubble').fadeIn('slow');

}

クラス「bubble」の div は、ホームページ上のボックスを表し、そのテキストは、カルーセルの前にある現在のカルーセル、またはコード内のクラス current によって決定される「現在の」画像と一致します。左右のボタン (id の left-but と right-but) は両方とも、正しい一連のイベントをトリガーします。クリックすると、leftRotation および rightRotation イベントが発生し、current、leftrotate、および rightrotate のクラスが新しい current、left、および right 画像にシフトし、吹き出し内のテキストが変更されます。ただし、カルーセル内の画像に同じメソッドを添付しようとすると、メソッドが最初に添付された画像とその画像のみでクリックが発生します。クラスが変更されても、他の画像では起動しません。

クラスがアタッチされているノードが変更される場合、イベントの特定のクラスに基づいてイベントをアタッチしないのが最善ですか? このイベントを発生させるより良い方法は何ですか? 私はこれで2日間困惑しており、解決策を考え出すのに実際に役立つ可能性があります.

4

1 に答える 1

0

$(selector).on()の代わりに使用することを検討してください$(selector).click():

// pass in e for e.preventDefault();
$('.leftrotate').on('click', function(e) { leftRotation(e) }); 
$('.rightrotate').on('click', function(e) { rightRotation(e) });

jQuery ドキュメント.on(): http://api.jquery.com/on/

要素を DOM に挿入する場合は、要素が作成された後にイベント ハンドラーを呼び出す必要があります。

「イベント ハンドラーは、現在選択されている要素にのみバインドされます。コードが .on() を呼び出す時点でページに存在している必要があります。要素が存在し、選択できるようにするには、ドキュメント内でイベント バインディングを実行してください。ページの HTML マークアップにある要素のハンドラ. 新しい HTML がページに挿入されている場合は、要素を選択し、新しい HTML がページに配置された後にイベント ハンドラを添付します. または、委任されたイベントを使用してイベント ハンドラを添付します、次に説明するように。」

于 2012-07-17T15:52:35.787 に答える