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.为了防止这种情况发生，您将不得不从对象中取消绑定处理程序。

更改这些行，（解释here）

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

要，

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

并改变这一行，

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

要，

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

修改：如juhana unbind()所述，已弃用，因此请改用off()。

JavaScript数组跳过值

1 个答案: