0

我为我的网站编写的一些 jquery 代码遇到了一些问题。

我正在使用cloudcarousel插件在我正在创建的网站的主页上有一个图像轮播。轮播的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 回答