Значения пропуска JavaScript-массива

Question

У меня есть эта функция, которая проходит через все теги <img> и добавляет их источник src в массив. Когда пользователь нажимает на основной родительский div, модальность модального модальности исчезает, показывая остальную часть галереи.

Моя проблема в том, что всякий раз, когда я нажимаю правый шеврон на определенном div, он показывает галерею и отлично ее слайд, но когда я нажимаю на другой div, массив пропускает два значения и отображает третий.

Чтобы объяснить мою проблему более кратко, позволяет сказать, что у меня есть этот массив:

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

При нажатии на следующую кнопку в первый раз, он прекрасно работает

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 имеют в этой точке обработчик с одним кликом. При нажатии на другое изображение добавляются новые обработчики кликов, и теперь, когда вы нажимаете шеврон, выполняются 2 обработчика, в результате ваш счетчик поднимается вверх или вниз на 2 вместо 1. Чтобы этого не произошло, вам придется отвяжите обработчики от объекта.

Изменить эти строки (объяснение here)

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

к,

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

И изменить эту строку,

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

к,

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

Редактировать: как указано juhana unbind() устарел, поэтому вместо этого используйте off().