Question

我试图编写一个回调函数，在淡出旧图片后淡化下一个图像。但似乎我可以淡出图像，但我只是淡化旧图像而不是新图像。我认为第一个$（＆＃34; #image＆＃34;）将是旧的，但我不知道为什么它在重置其attr之后仍然是旧图像。同样的事情也发生在标题中。

这是我的.js

$(document).ready(function() {
    // set up event handlers for links    
    $("#image_list a").click(function(evt) {
        $("#image").fadeOut(1000,
        function(){
            var imageURL = $(this).attr("href");
            $("#image").attr("src", imageURL).fadeIn(1000);
        });
        $("#caption").fadeOut(1000,
        function(){
            var caption = $(this).attr("title");
            $("#caption").text(caption).fadeIn(1000);
        });

        //var imageURL = $(this).attr("href");
        //$("#image").attr("src", imageURL);
        //$("#image").fadeIn(1000);
        //var caption = $(this).attr("title");

        //$("#caption").text(caption);
        //$("#caption").fadeIn(1000);
        // cancel the default action of the link
        evt.preventDefault();
    }); // end click

    // move focus to first thumbnail
    $("li:first-child a").focus();
}); // end ready

这是我的.html

<body>
    <main>
        <h1>Ram Tap Combined Test</h1>
        <ul id="image_list">
            <li><a href="images/h1.jpg" title="James Allison: 1-1">
                <img src="thumbnails/t1.jpg" alt=""></a></li>
            <li><a href="images/h2.jpg" title="James Allison: 1-2">
                <img src="thumbnails/t2.jpg" alt=""></a></li>
            <li><a href="images/h3.jpg" title="James Allison: 1-3">
                <img src="thumbnails/t3.jpg" alt=""></a></li>
            <li><a href="images/h4.jpg" title="James Allison: 1-4">
                <img src="thumbnails/t4.jpg" alt=""></a></li>
            <li><a href="images/h5.jpg" title="James Allison: 1-5">
                <img src="thumbnails/t5.jpg" alt=""></a></li>
            <li><a href="images/h6.jpg" title="James Allison: 1-6">
                <img src="thumbnails/t6.jpg" alt=""></a></li>
        </ul>
        <h2 id="caption">James Allison: 1-1</h2>               
        <p><img src="images/h1.jpg" alt="" id="image"></p>
    </main> 
</body>
</html>

Answer 1

这是this的问题，请注意that替换this

$("#image_list a").click(function(evt) {
    // Here this is element of #image_list a
    var that = this;
    $("#image").fadeOut(1000, function(){
        // Here this is element of #image
        var imageURL = $(that).attr("href");
        $("#image").attr("src", imageURL).fadeIn(1000);
    });
    $("#caption").fadeOut(1000, function(){
        // Here this is element of #image
        var caption = $(that).attr("title");
        $("#caption").text(caption).fadeIn(1000);
    });

    //var imageURL = $(this).attr("href");
    //$("#image").attr("src", imageURL);
    //$("#image").fadeIn(1000);
    //var caption = $(this).attr("title");

    //$("#caption").text(caption);
    //$("#caption").fadeIn(1000);
    // cancel the default action of the link
    evt.preventDefault();
}); // end click

图片点击淡出无法加载下一张图片

1 个答案: