如何在mouseover事件中每次计算img标记

Question

我需要每次在mouseover事件上计算div 这里是例子

$(document).ready(function() {

  var thumb = $('.thm-img img');
  var outer = $('.mn-img');
  var full = $('.full-img');
  var count = $('.mn-img img').length;
  var count = $('.mn-img img').length;
  var sc_height = $(outer).height();

  $(thumb).mouseover(function() {

    console.log(count);
    $(full).hide();
    if (!$(this).hasClass('added')) {
      $(this).addClass('added').clone().insertAfter($(full));
      // $(outer).animate({scrollTop : sc_height + "px"},200);
    }
  });
});

.det-sl-wrp {
  display: block;
  width: 100%;
  height: 480px;
  background: #FFFFFF;
  border: 1px solid #fff;
  margin: 8px 0 8px 0;
}
.mn-img {
  position: relative;
  width: 650px;
  height: 100%;
  background: red;
  float: left;
  overflow: scroll;
}
.thumb-wrp {
  float: left;
  width: 145px;
  overflow-y: auto;
  height: 100%;
  margin: 0 0 0 8px;
}
.mn-img img {
  width: 100%;
  height: 100%;
}
.sl-lft,
.sl-rgh {
  top: 0;
  right: 0;
  position: absolute;
  width: 50%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
}
.sl-rgh {
  left: 0;
}
.thm-img {
  width: 100%;
  display: block;
  height: 100px;
  margin: 2px 0 2px 0;
}
.thm-img img {
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="det-sl-wrp">
  <div class="mn-img">
    <div class="sl-lft"></div>
    <img class="full-img" src="img/img/1.jpg">
    <div class="sl-rgh"></div>
  </div>
  <div class="thumb-wrp">
    <div class="thm-img">
      <img src="img/img/1.jpg">
    </div>
    <div class="thm-img">
      <img src="img/img/2.jpg">
    </div>
    <div class="thm-img">
      <img src="img/img/3.jpg">
    </div>
    <div class="thm-img">
      <img src="img/img/4.jpg">
    </div>
    <div class="thm-img">
      <img src="img/img/1.jpg">
    </div>
    <div class="thm-img">
      <img src="img/img/2.jpg">
    </div>
    <div class="thm-img">
      <img src="img/img/3.jpg">
    </div>
    <div class="thm-img">
      <img src="img/img/4.jpg">
    </div>
  </div>
</div>

Answer 1

移动回调var count = $('.mn-img img').length;内部mouseover。

由于图片是动态添加到DOM中的，因此需要动态计算图片的数量。

否则， 的值count会被缓存，即使动态添加多个图像后它也会相同。

演示

$(document).ready(function() {

  var thumb = $('.thm-img img');
  var outer = $('.mn-img');
  var full = $('.full-img');
  var count = $('.mn-img img').length;
  var sc_height = $(outer).height();

  $(thumb).mouseover(function() {
    var count = $('.mn-img img').length;
    console.log(count);
    $(full).hide();
    if (!$(this).hasClass('added')) {
      $(this).addClass('added').clone().insertAfter($(full));
      // $(outer).animate({scrollTop : sc_height + "px"},200);
    }
  });
});

.det-sl-wrp {
  display: block;
  width: 100%;
  height: 480px;
  background: #FFFFFF;
  border: 1px solid #fff;
  margin: 8px 0 8px 0;
}
.mn-img {
  position: relative;
  width: 650px;
  height: 100%;
  background: red;
  float: left;
  overflow: scroll;
}
.thumb-wrp {
  float: left;
  width: 145px;
  overflow-y: auto;
  height: 100%;
  margin: 0 0 0 8px;
}
.mn-img img {
  width: 100%;
  height: 100%;
}
.sl-lft,
.sl-rgh {
  top: 0;
  right: 0;
  position: absolute;
  width: 50%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
}
.sl-rgh {
  left: 0;
}
.thm-img {
  width: 100%;
  display: block;
  height: 100px;
  margin: 2px 0 2px 0;
}
.thm-img img {
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="det-sl-wrp">
  <div class="mn-img">
    <div class="sl-lft"></div>
    <img class="full-img" src="img/img/1.jpg">
    <div class="sl-rgh"></div>
  </div>
  <div class="thumb-wrp">
    <div class="thm-img">
      <img src="img/img/1.jpg">
    </div>
    <div class="thm-img">
      <img src="img/img/2.jpg">
    </div>
    <div class="thm-img">
      <img src="img/img/3.jpg">
    </div>
    <div class="thm-img">
      <img src="img/img/4.jpg">
    </div>
    <div class="thm-img">
      <img src="img/img/1.jpg">
    </div>
    <div class="thm-img">
      <img src="img/img/2.jpg">
    </div>
    <div class="thm-img">
      <img src="img/img/3.jpg">
    </div>
    <div class="thm-img">
      <img src="img/img/4.jpg">
    </div>
  </div>
</div>