在每個循環中的for循環中使用$ this的jquery

這是我的基本jQuery圖像滑塊的代碼。問題是我想在一個頁面上有許多滑塊，其中每個滑塊具有不同數量的圖像。每個滑塊都有類別.portfolio-img-container和每個圖像.portfolio-img。

基本HTML設置如下：

<div class="portfolio-item"><div class="portfolio-img-container"><img class="portfolio-img"><img class="portfolio-img"></div></div> 

<div class="portfolio-item"><div class="portfolio-img-container"><img class="portfolio-img"><img class="portfolio-img"></div></div>

和Javascript：

$.each($('.portfolio-img-container'), function(){ 


     var currentIndex = 0, 
      images = $(this).children('.portfolio-img'), 
      imageAmt = images.length; 


     function cycleImages() { 
      var image = $(this).children('.portfolio-img').eq(currentIndex); 
      images.hide(); 
      image.css('display','block'); 
     } 


     images.click(function() { 
      currentIndex += 1; 
      if (currentIndex > imageAmt -1) { 
       currentIndex = 0; 

      } 

      cycleImages(); 
     }); 


    });

我的問題在功能cycleImages來了（）。我只需點擊任何圖像即可調用此功能。但是，它不工作：圖像被隱藏，但「display：block」不適用於任何圖像。我推斷使用devtools，我的問題是$（this）。變量圖像一直未定義。如果我將$（this）更改爲$（'。portfolio-img'），它將在每個.portfolio-img-container中選擇每個.portfolio-img，這不是我想要的。任何人都可以提出一種方法，只選擇當前.portfolio-img-container中的portfolio-imgs？

謝謝！

來源

2016-09-30 Mila Samdub

你可以通過設置相關背景：'cycleImages.call（本）; ''更好的方法是在'cycleImages（）'方法內設置關於'currentIndex'的邏輯，然後用下面的方法綁定它：'images.click（cycleImages）;' –

this以內cycleImages是全局對象（我假設你沒有使用嚴格模式），因爲你調用它的方式。

也許最好能包住this一次，就記得一個變量，並用它，因爲cycleImages將關閉了它：

$.each($('.portfolio-img-container'), function() { 
    var $this = $(this);             // *** 

    var currentIndex = 0, 
     images = $this.children('.portfolio-img'),      // *** 
     imageAmt = images.length; 

    function cycleImages() { 
     var image = $this.children('.portfolio-img').eq(currentIndex); // *** 
     images.hide(); 
     image.css('display', 'block'); 
    } 

    images.click(function() { 
     currentIndex += 1; 
     if (currentIndex > imageAmt - 1) { 
      currentIndex = 0; 
     } 

     cycleImages(); 
    }); 
});

旁註：

$.each($('.portfolio-img-container'), function() { /* ... */ });

可以更簡單而慣用地寫成：

$('.portfolio-img-container').each(function() { /* ... */ });

邊注2：

在ES2015及以上（你可以用transpiling今天使用的），你可以使用一個箭頭的功能，因爲靠近了this就像其他功能關過變量箭頭功能。

來源

2016-09-30 09:42:46

你不能只是指this內部函數（see this answer爲很多更詳細的解釋）內：

var self = this; // put alias of `this` outside function 
function cycleImages() { 
    // refer to this alias instead inside the function 
    var image = $(self).children('.portfolio-img').eq(currentIndex); 
    images.hide(); 
    image.css('display','block'); 
}

來源

2016-09-30 09:42:53 Frxstrem

在每個循環中的for循環中使用$ this的jquery

回答

相關問題