0

网络表单中有 3 个 div 和一个 img 标签，每当我们点击一​​个 div 时，最后一个图像的值必须淡出，而新图片会淡入。例如 ：

<script>
    $(document).ready(function () {

        $("#d2").click(function () {
             $("#img1").fadeToggle();
            document.getElementById("img1").src = "1.jpg";
            $("#img1").fadeIn('fast');
        });

        $("#d3").click(function () {
           $("#img1").fadeToggle();
            document.getElementById("img1").src = "2.jpg";
            $("#img1").fadeIn('fast');
        });

        $("#d4").click(function () {
             $("#img1").fadeToggle();
            document.getElementById("img1").src = "3.jpg";
            $("#img1").fadeIn('fast');
        });
    });
</script>

这是错的 ！请在这件事上给予我帮助 ！

4

3 回答 3

0

不仅限于 3 张图片，您可以为所有这些 div 添加一个类，例如 clickdiv。然后你可以像这样继续：

$(document).ready(function(){

   $(".clickdiv").click(function(){

     var i=$(this).index();
     $("#img1").fadeToggle();
     document.getElementById("img1").src = (i-1)+".jpg";
    $("#img1").fadeIn('fast');

   });

});
于 2013-09-19T06:25:10.597 回答
0 
//Include jQuery first....
<script>
$(function () {
    $("#Id1").click(function () {
        $("#img1").stop(true, true).fadeOut(function(){
            this.src = "put you new displaying image url";
            $(this).fadeIn(); //
        });
    });
});
</script>
于 2013-09-19T06:37:03.210 回答
0

问题似乎是fadeIn和fadeOut方法的异步性质

$(document).ready(function () {

    $("#d2").click(function () {
        $("#img1").stop(true, true).fadeOut(function(){
            this.src = "http://placehold.it/32/ff0000";
            $(this).fadeIn('fast');
        });
    });

    $("#d3").click(function () {
        $("#img1").stop(true, true).fadeOut(function(){
            this.src = "http://placehold.it/32/ffff00";
            $(this).fadeIn('fast');
        });
    });

    $("#d4").click(function () {
        $("#img1").stop(true, true).fadeOut(function(){
            this.src = "http://placehold.it/32/000000";
            $(this).fadeIn('fast');
        });
    });
});

演示：小提琴

我将如何做到这一点，将一个名为的类img-toggle和一个属性添加data-img到d1,d2和d3元素中

<div id="d4" class="img-toggle" data-img="http://placehold.it/32/000000">Test</div>

然后

$(document).ready(function () {
    $(".img-toggle").click(function () {
        var src = $(this).data('img')
        $("#img1").stop(true, true).fadeOut(function(){
            this.src = src;
            $(this).fadeIn('fast');
        });
    });
});

演示：小提琴

于 2013-09-19T06:20:09.167 回答