Question

我的问题是建立一个循环。

我有以下html块3次（class =“listThumbsArrows_1”，class =“listThumbsArrows_2”和class =“listThumbsArrows_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'});
    }
}

当我只有一个块时，它工作得很好，但是当我添加两个块时它不起作用。对于instace，如果我在第二个或第三个区块中并且我点击了arrowUp，它会在第一个区块中显示动画，并且我的印象是它的拇指数量增加了3倍（三个区块的所有图像的总和）< / p>

任何人都可以告诉我如何个性化每个块，并使所有的javascript单独工作？

由于

Answer 1

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

$('.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();
});

我会比它更抽象地抽象它，但我希望这可以让你更好地了解它为什么不起作用

循环，单独的元素块

1 个答案: