Mouseenter内部函数不改变属性

Function Inside Mouseenter Not Changing Attr

本文关键字：属性 改变 内部函数 Mouseenter      更新时间：2023-09-26

我试图在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);
});

您不必一直重置这个侦听器，只需将其附加到body。当每个img进入后，它将传播到体内。然后，您可以动态地将img添加到页面中，而不必担心添加或删除侦听器。

相关文章：