JavaScript配列のスキップ値

Question

<img>タグをすべてループして、そのソースsrcを配列に追加するこの関数があります。ユーザーがメインの親divをクリックすると、Bootstrapのモーダルが消えてギャラリーの残りの部分が表示されます。

私の問題は、特定のdivの右のシェブロンを押すたびにギャラリーが表示され、完全にスライドしますが、別のdivをクリックすると、配列は2つの値をスキップし、代わりに3番目のdivを表示します。私は、次のボタンを最初にクリックすると、それは完全に

1 => 2 => 3 => 4 => 5

しかし、ときに動作します

arr = [1,2,3,4,5]

：

より簡単に私の問題を説明するためには、私はこの配列を持って言うことができます別のdivをクリックして次を押します：

1 => 2 => 5

ここまでは私が今まで行ってきた作業のdemoです。

HTML：

<div class="col-md-4 col-sm-4 col-lg-4 padBtm10"> 
    <a data-toggle="modal" data-target="#exampleModal" href="#" class="modal-trigger deco-none" onclick="return false;"> 
     <div class="card that_img radius10"> 
      <img data-caption-title="First caption" class="card-img-top img-responsive caption" src="http://dummyimage.com/500x300/000/fff" alt="Card image cap" /> 
      <span class="fa fa-search search fa-3x blue"></span> 
      <div class="redbg radiusBtm10 white card-block"> 
      <h4 class="card-title">Lorem Ipsum</h4> 
      </div> 
      <div class="imgs-album"> 
      <img src="http://dummyimage.com/500x300/000/fff" class="img-responsive full" data-caption-title="First caption for slider 1" /> 
      <img src="http://dummyimage.com/500x300/ddd/fff" class="img-responsive full" data-caption-title="First caption for slider 2" /> 
      <img src="http://dummyimage.com/500x300/aaa/fff" class="img-responsive full" data-caption-title="First caption for slider 3" /> 
      <img src="http://dummyimage.com/500x300/ccc/000" class="img-responsive full" data-caption-title="First caption for slider 4" /> 
      </div> 
     </div> 
    </a> 
</div> 

更新（モーダルのためのHTML構造）

<div class="modal breaker fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-body noPad"> 
     <button type="button" class="close-pop close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <div class=""> 
      <a href="#" onclick="return false;"> 
       <span class="fa fa-chevron-right fa-2x right white"></span> 
      </a> 
      <a href="#" onclick="return false;"> 
       <span class="fa fa-chevron-left fa-2x left white"></span> 
      </a> 
     </div>   
     <div class="pop-image"> 
      <img src="" class="img-responsive full"> 
     </div> 
     <h4 class="modal_caption"></h4> 
     </div> 
    </div> 
    </div> 
</div> 

はJavaScript：

(function() { 
    var ready = function() { 
    $(".that_img").hover(function() { 
     $(this).find("span.search").css("display", "block"); 
    }, function() { 
     $(this).find("span.search").css("display", "none"); 
    }); 

    $(".that_img").on({ 
     click: function() { 
     var img_src_arr = $(this).find(".imgs-album") 
      .children("img").map(function() { 
      return $(this).attr("src"); 
      }).get(); 

     var img_data_cap = $(this).find(".imgs-album") 
      .children("img").map(function() { 
      return $(this).data("caption-title"); 
      }).get(); 

     $(".pop-image").find("img").attr("src", img_src_arr[0]); 
     $(".modal_caption").html(img_data_cap[0]); 
     var counter = 0; 
     counter >= 0 ? $(".left").hide() : $(".left").show(); 

     $(".right").on({ 
      click: function() { 
      counter += 1; 
      if (counter == 1) { 
       $(".left").show() 
      } 
      var next = $(".pop-image").find("img") 
       .attr("src", img_src_arr[counter]); 
      var next_cap = $(".modal_caption") 
       .html(img_data_cap[counter]); 
      if (counter > (img_src_arr.length - 2)) { 
       $(".right").hide(); 
       $(".left").show(); 
      } 
      } 
     }); 
     $(".left").on({ 
      click: function() { 
      counter -= 1; 
      $(".right").show(); 
      if (counter === 0) { 
       $(".right").show(); 
       $(".left").hide(); 
      } 
      $(".pop-image").find("img") 
       .attr("src", img_src_arr[counter]); 
      var prev = $(".modal_caption").html(img_data_cap[counter]); 
      } 
     }); 
     } 
    }); 
    } 
    $(document).ready(ready); 
}).call(this); 

Answer 1

たびに画像がクリックされたため、問題が発生し、クリックハンドラが追加されました。最初の画像では、.leftと.rightはその時点で1つのクリックハンドラを持っているので、すべての画像は問題なく表示されます。別の画像をクリックすると、新しいクリックハンドラーが追加され、シェブロンをクリックすると2つのハンドラーが実行され、カウンターが1の代わりに2ずつ上がったり下がったりします。これを防ぐには、オブジェクトからハンドラをアンバインドします。

変更これらの行を、（説明here）

$(".right").on({ 
$(".left").on({ 

に、

$(".right").off().on({ 
$(".left").off().on({ 

そして、この行を変更し、

counter >= 0 ? $(".left").hide() : $(".left").show(); 

に、

$(".right").show() 
$(".left").hide() 

編集：juhana unbind()で説明されているように、代わりにoff()を使用してください。