jQuery 控制台记录图像源不工作 $(this).find('img').attr('src');

Question

我正在尝试使用 $(this).find('img').attr('src'); 对图像源进行控制台日志记录；

这是我的 HTML

<div id="container">
    <div id="stage">
        <div id="gallery">
            <img class="photo" src="_images/image#1" />
            <img class="photo" src="_images/image#2" />
            <img class="photo" src="_images/image#3" />
            <img class="photo" src="_images/image#4" />                 
        </div>
    </div>
</div>

这是我的 JS

function grabIt(){
  var thisImageSrc = $(this).find('img').attr('src');
}

console.log(thisImageSrc)

$('#gallery img').mouseover(grabIt);

我将在一个更大的函数中使用 img 源，这超出了这个问题的范围。我的目标是在将鼠标悬停在图像上时抓取图像源。

我是 jQuery 新手，如果可能的话，我更容易理解答案代码的长形式，而不是嵌套在函数内部的函数。

谢谢！

Answer 1

将console.log 语句放入函数中。 thisImageSrc 在 grabIt 之外不存在，并且 console.log 在 grabIt 被执行之前被调用。

此外，由于您将事件处理程序绑定到图像本身，$(this).find('img') 将返回一个空集。一个图像不能包含另一个图像。访问元素本身的src 属性。

所以，解决这两个问题，你最终会得到

function grabIt(){
  var thisImageSrc = this.src;
  console.log(thisImageSrc)
}

$('#gallery img').mouseover(grabIt);