サイクル、別の要素ブロック

Question

私の問題は、サイクルを構築することです。

Iは3回（クラス= "listThumbsArrows_1"、クラス= "listThumbsArrows_2" クラス= "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アクションを次のHTMLのブロックを有します：

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

私がブロックを1つしか持っていなかったとき、それはうまくいきましたが、ブロックを2つ追加すると、どのように動作するのでしょうか。私が2番目または3番目のブロックにいて、arrowUpをクリックすると、最初のブロックでアニメートされ、3倍のサム（3ブロックのすべての画像の合計）を数えているという印象を受けます。

どのように個々のブロックを個別化し、すべてのブロックごとに個別に機能するすべての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(); 
}); 

などをしたいと思うかもしれません