Question

我有这个轮播功能：

if ($.browser.msie && $.browser.version.substr(0,1)<9) {
$("ul.display li:eq(0))").show();
}
else
{
$("ul.display li:first").show();
}

$(".viewer ul li.img:first").addClass('viewerOn');

function prodCarousel(){
var aSpecimen = 0;

    $('li.next a').click(function() {
        $('ul.display li').hide();
        $('.viewer ul li.img').siblings().removeClass('viewerOn');
        aSpecimen = aSpecimen + 1;

        if (aSpecimen == $('ul.display li').length + 0)
            aSpecimen = 0;

        if (aSpecimen == $('.viewer ul li.img').length + 0)
            aSpecimen = 0;

        $('ul.display li:eq(' + aSpecimen + ')').fadeIn("fast");

        $('.viewer ul li.img:eq(' + aSpecimen + ')').addClass('viewerOn');

        return false;
    });

    $('li.prev a').click(function() {
        $('ul.display li').hide();
        $('.viewer ul li.img').siblings().removeClass('viewerOn');
        aSpecimen = aSpecimen - 1;

         if (aSpecimen == -1) aSpecimen = $('ul.display li').length - 1;

        $('ul.display li:eq(' + aSpecimen + ')').fadeIn("fast");
        $('.viewer ul li.img:eq(' + aSpecimen + ')').addClass('viewerOn');
        return false;
    });

}

效果很好，但由于我在页面上有多个使用 .dispaly 类的div，因此该功能会遍历页面上的所有图像。

我想要的是这个功能只能循环显示父div中的照片。

我不确定该怎么做？

Answer 1

您正在引用ul.display，这意味着如果您在该页面上有任何div，那将无关紧要。

假设您的意思是<ul>类有多个.display，并且prev和next按钮与您希望操作的<ul>位于同一容器内，则可以在click事件中引用父项：

$('li.next a').click(function() {
    $(this).parent().parent().parent().find('ul.display li').hide();
    ... etc
});

首先parent()引用li.next，第二parent()引用<ul>包含li.next，第三parent()引用<ul>容器，可能是一个div，如果你设置你的DOM来支持这种关系，它也很容易包含ul.display。

将函数限制为父div

1 个答案: