javascript - 如何在鼠标悬停时将 img 的 ID 和 ID 传递给函数？

Question

我正在尝试将 img 的 id 传递给 mouseover 上的函数，以便我可以在一个页面上的多个图像上使用这个 javascript？

我正在尝试将 img_id 更改为鼠标悬停的任何内容

有人可以拍一下这个吗？

谢谢！

<img 
src="http://coolimg2.1.jpg" 
alt="http://coolimg2."
onmouseover="animate();"
onmouseout="stopAnimation();"
id="myImg1" 
class="sample"
/>

<img 
src="http://coolimg3.1.jpg" 
alt="http://coolimg3."
onmouseover="animate();"
onmouseout="stopAnimation();"
id="myImg2" 
class="sample"
/>

<p id="test"></p>

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script> 

<script type="text/javascript">


        $(function() {
            $('.sample').mouseover(function() {
                $('#test').html(this.id);
            });
        });  



var myImages = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]
var img_index = 0;
var timer;
//I'm trying to change the img_id to what is being mouseovered on. not "myimg2"
var img_id = "myImg2";
var imgsrc = document.getElementById(img_id).alt;
// Start animation
function animate() {
    me = document.getElementById(img_id);

    me.src = imgsrc + myImages[img_index] + ".jpg"

    img_index++;

    if (img_index == myImages.length){
        img_index = 0;
    }

    timer = setTimeout(animate, 500);
}

function stopAnimation() {
    clearTimeout(timer);
}
</script>

Answer 1

尝试将鼠标悬停功能更改为：

$('.sample').mouseover(function() {
   img_id = $(this).attr('id');
   animate();
});

这是一个 jsfiddle，显示段落标记更改为 mouseover 元素的 ID。