如何在鼠标悬停事件

Question

每次我需要计算DIV每次上mouseover事件数的img标签 这里是example

$(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的值会被缓存，并且即使在动态添加多个图像之后也是如此。

Demo

$(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>