Wie img-Tags jedes Mal mit der Maus darüber Ereignis

Question

I div mouseover Ereignis hier jedes Mal zählen, müssen zählen ist 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

die var count = $('.mn-img img').length; innerhalb der Callback-mouseover verschieben.

Da die Bilder dynamisch im DOM hinzugefügt werden, muss die Anzahl der Bilder dynamisch berechnet werden.

Andernfalls wird der Wert count zwischengespeichert, und es wird auch nach dem dynamischen Hinzufügen mehrerer Bilder gleich sein.

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>