JavaScript数组跳过值

我有一个函数，它将所有

循环到一个数组中。当用户单击主父div时，引导模式在显示库的其余部分时淡出

我的问题是，每当我在一个特定的div上按下右V形按钮时，它就会显示图库并完美地滑动它们，但当我单击另一个div时，数组会跳过两个值并显示第三个值

为了更简单地解释我的问题，假设我有以下数组：

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

当我第一次单击“下一步”按钮时，它工作正常

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

但当我单击另一个div并按next时：

1=>2=>5

这是我迄今为止所做的工作的一部分

HTML:

出现此问题是因为每次单击图像时，都会添加单击处理程序。对于第一个图像，一切似乎都很好，因为此时，
.left
和
.right
有一个单击处理程序。单击另一个图像时，将添加新的单击处理程序，现在，当您单击一个V形时，将执行2个处理程序，从而使计数器上升或下降2，而不是1。为了防止这种情况发生，您必须解除处理程序与对象的绑定

更改这些行（解释）

对,

改变这一行,

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

对,

编辑：如juhana所述，已弃用，因此请改用。
问题发生的原因是每次单击图像时，都会添加单击处理程序。对于第一个图像，一切似乎都很好，因为此时，
.left
和
.right
有一个单击处理程序。单击另一个图像时，将添加新的单击处理程序，现在，当您单击一个V形时，将执行2个处理程序，从而使计数器上升或下降2，而不是1。为了防止这种情况发生，您必须解除处理程序与对象的绑定

更改这些行（解释）

对,

改变这一行,

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

对,

编辑：如juhana所述，已弃用，请改用。
如您链接的问题中所述，
.unbind（）
已弃用，应改用
.off（）
。如您链接的问题所述，
.unbind（）
已弃用，应改用
.off（）
。
(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);

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

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

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

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