循环，单独的元素块

cycle for, separate block of elements

本文关键字：元素 单独 循环      更新时间：2023-09-26

我的问题是为构建一个循环。

我有以下html块3次（class="listThumbsArrows_1"、class="listThumbsArrows_2"和class="list拇指箭头_3"），但具有不同的图像

 <div id="listThumbsArrows" class="listThumbsArrows_1">
    <div class="arrowUp">
        <img src="../_img/details_arrow_up.png" id="thumbUp" alt="">
    </div>
    <div class="arrowDown">
        <img src="../_img/details_arrow_down.png" id="thumbDown" alt="">
    </div>
    <div id="listThumbs">
        <div id="thumbsContainer" class="thumbsContainer">
            <div id="areaThumb" class="areaThumb_2">
                <div id="posThumb_1" class="posThumb">
                    <img src="../_img/detail_car.jpg" id="detail_img_1" alt="">
                </div>
                             ....................
            </div><!--areaThumb-->
          </div><!--thumbsContainer-->
    </div><!--end of listThumbs-->
</div><!--end of listThumbsArrows-->

以及一些元素的javascript操作：

    $('.arrowDown').css({'visibility':'hidden'});
var cont=0;
var numThumbs = $('#areaThumb').length;
alert(numThumbs);
$('.arrowUp').click(function(){
    $('#thumbsContainer').animate({top: '-='+93+'px'}, {duration: 1000});
    cont++;
    arrowsThumbs();
});
$('.arrowDown').click(function(){
    $('#thumbsContainer').animate({top: '+='+93+'px'}, {duration: 1000});
    cont--;
    arrowsThumbs();
});
function arrowsThumbs(){
    if((numThumbs - 3)==cont){
        $('.arrowUp').css({'visibility':'hidden'});
    }else{
        $('.arrowUp').css({'visibility':'visible'});
    }
    if((numThumbs + cont)==(numThumbs)){
        $('.arrowDown').css({'visibility':'hidden'});
    }else{
        $('.arrowDown').css({'visibility':'visible'});
    }
}

当我只有一个方块的时候，效果很好，但当我再加两个方块时，效果就不好了。对于instance，如果我在第二个或第三个块中，单击箭头向上，它会在第一个块中设置动画，我有一种感觉，它的拇指数是三个块所有图像的总和的3倍。

有人能告诉我如何对每个块进行个性化处理，并使所有javascript单独为所有块工作吗？？

感谢

您需要提供动画上下文。例如，当你有这个块

$('.arrowUp').click(function(){
    $('#thumbsContainer').animate({top: '-='+93+'px'}, {duration: 1000});
    cont++;
    arrowsThumbs();
});

你要求它制作#ThumbsContainer的动画，但有多个。你可能想做一些类似的事情

$('.arrowUp').click(function(){
    $(this).parent('#thumbsContainer').animate({top: '-='+93+'px'}, {duration: 1000});
    cont++;
    arrowsThumbs();
});

很明显，我会对它进行更多的抽象，但我希望这能让你更好地了解它为什么不起作用

相关文章：