JavaScript 数组跳过值

Question

我有一个循环遍历所有 <img> 的函数标记并添加其来源 src到一个数组中。当用户单击主父 div 时，Bootstrap 的模式会淡入显示图库的其余部分。

我的问题是，每当我在特定 div 上按下右侧 V 形图标时，它都会显示图库并完美地滑动它们，但是当我单击另一个 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 此时有一个单击处理程序。单击另一个图像时，会添加新的单击处理程序，现在当您单击 V 形时，将执行 2 个处理程序，导致您的计数器增加或减少 2 而不是 1。为了防止这种情况发生，您必须解除处理程序与对象的绑定(bind)。

更改这些行，(解释 here )

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

到，

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

并更改此行，

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

到，

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

编辑:如juhana所述unbind()已弃用，因此使用 off()相反。