Javascript jquery缺少手动教程：将replaceWith（）替换为hover（）不工作_Javascript_Jquery_Jquery Hover_Replacewith

Javascript jquery缺少手动教程：将replaceWith（）替换为hover（）不工作

javascript jquery

Javascript jquery缺少手动教程：将replaceWith（）替换为hover（）不工作,javascript,jquery,jquery-hover,replacewith,Javascript,Jquery,Jquery Hover,Replacewith,我正在处理第215页的jquery缺失手册O'Reilly教程鉴于此HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Rollover Images</title> <link href="../_css/site.css" rel="stylesheet"> <style> #gallery img { dis

我正在处理第215页的jquery缺失手册O'Reilly教程

鉴于此HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rollover Images</title>
<link href="../_css/site.css" rel="stylesheet">
<style>
#gallery img {
    display: inline-block;
    margin: 10px;
    border: 1px solid rgb(0,0,0);
}
</style>
<script src="../_js/jquery.min.js"></script>

<script src="my_scripts/rollover.js"></script>

</head>
<body>
<div class="wrapper">
<header>
    JAVASCRIPT <span class="amp">&amp;</span> jQUERY: THE&nbsp;MISSING&nbsp;MANUAL
</header>
<div class="content">
    <div class="main">
        <h1>Rollover Images</h1>
        <p>Mouse over the images below</p>
        <div id="gallery"> <a href="../_images/large/blue.jpg"><img src="../_images/small/blue.jpg" width="70" height="70" alt="blue"></a> <a href="../_images/large/green.jpg"><img src="../_images/small/green.jpg" width="70" height="70" alt="green"></a> <a href="../_images/large/orange.jpg"><img src="../_images/small/orange.jpg" width="70" height="70" alt="orange"></a> <a href="../_images/large/purple.jpg"><img src="../_images/small/purple.jpg" width="70" height="70" alt="purple"></a> <a href="../_images/large/red.jpg"><img src="../_images/small/red.jpg" width="70" height="70" alt="red"></a> <a href="../_images/large/yellow.jpg"><img src="../_images/small/yellow.jpg" width="70" height="70" alt="yellow"></a></div>
    </div>
</div>
<footer>
    <p>JavaScript &amp; jQuery: The Missing Manual, 3rd Edition, by <a href="http://sawmac.com/">David McFarland</a>. Published by <a href="http://oreilly.com/">O'Reilly Media, Inc</a>.</p>
</footer>
</div>
</body>
</html>

教程要求我在页面最初加载时将大图像滚动到小图像上。本书继续使用正则表达式技巧完成前面提到的任务

我不想以建议的方式完成本教程，我试图找出如何通过仅使用hover函数中的replaceWith函数来正确执行图像滚动

我想到了这个脚本rollover.js：

$(document).ready(function() {

    $('#gallery a').each(function(){

        if ("$(this)[href*='large']" ){

            $('<img>').attr('src',$(this).attr('href'));

            }       
        });


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

        var $oldimage = 0;

        $(this).hover(

        function(){

            $oldimage = $(this).replaceWith('<img src=' + $(this).parent().attr('href') + '>');
            console.log('old image' + $oldimage);

        }
        ,
        function(){

            $(this).replaceWith('$oldimage');
            console.log('comeback' + $oldimage);

        });

    });

}); // end ready

结果是正确执行了hover函数的第一部分mousenter，但似乎根本没有执行hover函数的第二部分mouseleave，即使是console.log。

尝试以下操作：

  $(document).ready(function() {

    $('#gallery a').each(function(){

        if ("$(this)[href*='large']" ){

            $('<img>').attr('src',$(this).attr('href'));

            }       
        });


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

        var $oldimage = 0;

        $(this).on('mouseover',

        function(){

            console.log($(this));

            $oldimage = $(this).attr('src');
                $(this).replaceWith('<img src=' + $(this).parent().attr('href') + '>');
               // $('#gallery img').each(function(){
                       $(this).on( "mouseleave", function(){

                           $(this).replaceWith('<img src=' + $oldimage + '>');
                           console.log('comeback' + $oldimage);

                       });

          //  });
            console.log('old image' + $oldimage);

        });

    });

}); // end ready

问题是由您在第一个处理程序中所做的操作引起的。在使用replaceWith时，您正在更改DOM，特别是已将悬停事件绑定到的img元素，并影响现有的事件绑定

您应该使用attr函数来更新image src属性，而不是使用replaceWith

编辑

试试这个，例如：

试过了，但是什么也没发生，小图像没有显示。重点是这本书按照你的建议完成了教程，使用了attr函数和正则表达式技巧，但由于我不想这样继续，我想问问大家是否有办法使用replaceWith函数完成任务。你能帮我吗？为什么你这么想用replaceWith？当只有一个属性需要更新时，为什么要从DOM中删除元素并再次添加它？为什么？因为我正在试验如何在与hover的组合中正确使用这个函数，这就是为什么。顺便说一句，我尝试了你的更改，现在大图像正确地替换了小图像并调整了大小，但是悬停函数的第二部分仍然没有执行；我的意思是，即使鼠标离开该图像，彩色大图像也会卡在容器中。您可以将其与悬停侦听器结合使用，但不能在绑定到悬停事件的元素上使用。这就是你遇到问题的原因。您可以尝试将悬停事件绑定到父事件，并使用replaceWith更新内…我将尝试将悬停绑定到