javascript - Mouseenter 内部的函数不改变 Attr

Question

这个问题已经有答案了:

How to access the correct `this` inside a callback (15 个回答)

已关闭 9 年前。

我正在尝试在 mouseenter 函数内运行 attr 更改。我需要在 mouseenter 函数中创建一个新函数，因为我最终需要它回调。不过我是从头开始，目前它还不能在最基本的层面上运行。

在下面的示例中，您将看到我首先迭代所有图像。然后，我获取图像文件名并更改后缀(据我所知，这对此并不重要，我只是将其包含在内，以便将我正在做的所有事情都放在此处以防万一)。然后，我运行一个“mouseenter”函数，该函数将在图像元素上触发。它将图像的新“src”记录到控制台，然后应该更改 src。它成功记录 src，但未成功触发 attr 函数。

我还记录了 $(this).attr('src') 以确保它正确识别图像并且效果良好。因此它知道当前的 $(this).attr('src') 并识别 new_img_src 变量，但不会触发该函数。为什么会这样？

就像我说的，我最终想要执行一个回调函数，这就是为什么这样格式化的原因。一旦我设置了所有代码，我将从 img_loop() 中调用 img_loop() ，因此我需要 img_loop() 函数在那里，而不是仅使用 mouseenter 中的 $(this).attr() 函数。

感谢您的帮助!

$('img').each(function(){

    var img_src = $(this).attr('src');
    var url_prefix = img_src.substr(0, img_src.indexOf('-1.jpg')); 
    var new_img_src = url_prefix + '-3.jpg';

    $(this).mouseenter(function(){

        function img_loop(){
            console.log(new_img_src);
            $(this).attr('src',new_img_src);
        }

        img_loop();
    });

});

Answer 1

不要在每个元素上分配 .mouseenter() 可能更容易，而是使用 jquery .on() 的委托(delegate)

$('body').on('mouseenter','img',function(){
    var me = $(this),
        src = me.attr('src');

    //User your stuff to prep src string
    src = src.substr(0, src.indexOf('-1.jpg')); 
    src = src+ '-3.jpg';

    me.attr('src',src);
});

您不必不断重置此监听器，只需将其附加到正文即可。当输入每个 img 时，它将传播到正文。然后您可以动态地将 img 添加到页面，而不必担心添加或删除监听器。