javascript - Mouseenter内部的功能未更改属性

This question already has answers here:

How to access the correct `this` inside a callback?
                                
                                    （10个回答）
                                
                        
                6年前关闭。
            
        

我正在尝试在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();
    });

});

最佳答案

不为每个元素分配.mouseenter()，而是将委托与jquery .on()一起使用，可能会更容易

$('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动态添加到页面，而不必担心添加或删除侦听器。

关于javascript - Mouseenter内部的功能未更改属性，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22414193/