各ループのforループで$ thisを使用したJquery

Question

これは私の基本的なjqueryイメージスライダのコードです。問題は、1つのページに複数のスライダがあり、各スライダの画像数が違うことです。各スライダーには、.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で起動します）。私は任意の画像をクリックしてこの関数を呼び出しています。しかし、それは動作していません：画像は隠されますが、 "表示：ブロック"はどの画像にも適用されません。私は私の問題が$（これ）であるdevtoolsを使って推論しました。可変イメージは未定義のままです。 $（this）を$（ 'portfolio-img'）に変更すると、すべての.portfolio-img-containerのすべての.portfolio-imgが選択されます。誰も現在の.portfolio-img-containerの中のportfolio-imgsだけを選択する方法を提案できますか？

ありがとうございます！

Answer 1

thiscycleImagesはグローバルオブジェクトです（厳密なモードを使用していないと仮定しています）。

、一度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だけのような他の機能の上に近い矢印機能するので、矢印の機能を使用することができます。

Answer 2

あなただけの内部機能（ためsee this answerたくさんより詳細な説明）の内側にthisを参照することができません。

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