週期爲，單獨的元素塊

我有以下的html塊3次（等級= 「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'}); 
    } 
}

當我只有一個塊，它的工作很好，但是當我增加了兩個塊，它不工作應該如何。例如，如果我在第二個或第三個區塊中，並且我點擊arrowUp，它會在第一個區塊中進行動畫處理，並且我有一個印象，即它正在計算3倍多的大拇指（這三個區塊的所有圖像的總和）

任何人都可以告訴我如何個別化每個塊，並使所有的JavaScript單獨工作的所有塊？

謝謝

來源

2011-06-20 peterK

你需要給你的動畫上下文。例如，當你有這個塊

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

我會抽象有點比這更明顯的，但我希望這給你的，爲什麼它不工作

一個更好的主意

來源

2011-06-20 22:41:49

週期爲，單獨的元素塊

回答

相關問題