0

我正在尝试做一个淡入淡出效果，淡出一个 div 并将其替换为另一个。为此，我创建了一个 lastDiv var，它设置最后一次单击的 div 的数量。

但是当我尝试设置一个 if js 说有一个错误。我很确定我使用的是正确的语法。（我是初学者）

谢谢

var lastDiv = 1;

$("#item1").click(function () {
    if(lastDiv == 2) {  $("#div2").fadeOut(0500, function() { $("#div1").fadeIn(500, function () {lastDiv = 1;});   });  }); }
    else if (lastDiv == 3) {  $("#div3").fadeOut(0500, function() { $("#div1").fadeIn(500, function () {lastDiv = 1;}); });  }); }


$("#item2").click(function () {
    if(lastDiv == 1){   $("#div1").fadeOut(0500, function() { $("#div2").fadeIn(0500, function () {lastDiv = 2;}) });  }); }
    else if(lastDiv == 3){  $("#div3").fadeOut(0500, function() { $("#div2").fadeIn(0500, function () {lastDiv = 2;}) });  }); }


$("#item3").click(function () {
    if(lastDiv == 1) { $("#div1").fadeOut(0500, function() { $("#div3").fadeIn(0500, function () { lastDiv = 3 })  }); }
    else if(lastDiv == 2) { $("#div2").fadeOut(0500, function() { $("#div3").fadeIn(0500, function () { lastDiv = 3 })  }); } }); 

</script>
4

6 回答 6

8

你的大括号都搞砸了：
我把你的代码通过美化器：

var lastDiv = 1;

$("#item1").click(function () {
    if (lastDiv == 2) {
        $("#div2").fadeOut(0500, function () {
            $("#div1").fadeIn(500, function () {
                lastDiv = 1;
            });
        });
    });
} else if (lastDiv == 3) {
    $("#div3").fadeOut(0500, function () {
        $("#div1").fadeIn(500, function () {
            lastDiv = 1;
        });
    });
});
}


$("#item2").click(function () {
    if (lastDiv == 1) {
        $("#div1").fadeOut(0500, function () {
            $("#div2").fadeIn(0500, function () {
                lastDiv = 2;
            })
        });
    });
} else if (lastDiv == 3) {
    $("#div3").fadeOut(0500, function () {
        $("#div2").fadeIn(0500, function () {
            lastDiv = 2;
        })
    });
});
}


$("#item3").click(function () {
    if (lastDiv == 1) {
        $("#div1").fadeOut(0500, function () {
            $("#div3").fadeIn(0500, function () {
                lastDiv = 3
            })
        });
    } else if (lastDiv == 2) {
        $("#div2").fadeOut(0500, function () {
            $("#div3").fadeIn(0500, function () {
                lastDiv = 3
            })
        });
    }
});

您应该在浏览器中有错误！

于 2012-05-16T16:19:03.527 回答
1

这就是您的代码的样子，带有适当的缩进和新行：

$("#item1").click(function () {
    if(lastDiv == 2) {
        $("#div2").fadeOut(0500, function() {
            $("#div1").fadeIn(500, function () {
                lastDiv = 1;
            });
        });
    });
} else if (lastDiv == 3) {
    $("#div3").fadeOut(0500, function() {
        $("#div1").fadeIn(500, function () {
            lastDiv = 1;
        });
    });
});
}

看到问题了吗？该部分位于, 而不是else if的结束标记之后。这是一个语法错误，javascript 没有告诉你。尝试安装 FireBug、Firefox 的插件或类似的插件，这样您就可以看到此类错误。function() {if

请不要将这段代码写在一行上。我不知道你怎么读。

于 2012-05-16T16:21:01.823 回答
1

if您的语句、括号关闭和奇怪的分号有很多语法错误。我已经为您修复了它们并缩进了所有内容以使其更易于阅读。我还删除了前导零。我只完成了你的第一个click活动，但希望它会有所帮助！:)

$("#item1").click(function ()
{
    if (lastDiv == 2)
    {
        $("#div2").fadeOut(500, function()
        {
            $("#div1").fadeIn(500, function()
            {
                lastDiv = 1;
            });
        }); 
    }
    else if (lastDiv == 3)
    {
        $("#div3").fadeOut(500, function()
        {
            $("#div1").fadeIn(500, function()
            {
                lastDiv = 1;
            });
        });
    }
});
于 2012-05-16T16:21:14.417 回答
1

看起来你放错了 }); 在那里，还有其他几个语法问题。分隔代码和缩进将帮助您更好地查看这些类型的问题：

var lastDiv = 1;

$("#item1").click(function (){
    if(lastDiv == 2){
        $("#div2").fadeOut(0500, function(){
            $("#div1").fadeIn(500, function(){
                lastDiv = 1;
            });
        });
    }else if(lastDiv == 3){
        $("#div3").fadeOut(0500, function(){
            $("#div1").fadeIn(500, function(){
                lastDiv = 1;
            });
        });
    }
});

$("#item2").click(function (){
    if(lastDiv == 1){
        $("#div1").fadeOut(0500, function(){
            $("#div2").fadeIn(500, function(){
                lastDiv = 2;
            });
        });
    }else if(lastDiv == 3){
        $("#div3").fadeOut(0500, function(){
            $("#div2").fadeIn(500, function(){
                lastDiv = 2;
            });
        });
    }
});

$("#item3").click(function (){
    if(lastDiv == 1){
        $("#div1").fadeOut(0500, function(){
            $("#div3").fadeIn(500, function(){
                lastDiv = 3;
            });
        });
    }else if(lastDiv == 2){
        $("#div2").fadeOut(0500, function(){
            $("#div3").fadeIn(500, function(){
                lastDiv = 3;
            });
        });
    }
});
于 2012-05-16T16:25:57.013 回答
1

让我们假设 div 具有class="content"和可点击元素具有class="item"和属性data-i = n，其中n是 1、2、3。

您可以通过无条件地淡出所有内容 div 来显着简化代码，尽管大概只有一个会真正淡出（其他将保持隐藏），然后找到正确的内容 div 淡入。

$(".item").click(function () {
    var index = $(this).data('i');//or similar - there are other possibilities here.
    $(".content").fadeOut(500, function() {
        $("#div"+index).fadeIn(500);//fade in the content div corresponding to the clicked item
    });
});

这不仅可以修复您的错误，还可以更好地利用 jQuery 的强大功能。

于 2012-05-16T16:35:05.930 回答
0

我相信这就是你想要做的：

var selected = null;
var selectors = ["#div1","#div2","#div3"]; // use any valid jquery selectors

var selectme = function(){  
    if (selected==this)
        return;

    selected = this;

    $.each(selectors,function(key,selector){
        $(selector).fadeTo(300,0.2);
    });

    $(selected).fadeTo(300,1);
};

$(document).ready(function(){
    $.each(selectors,function(key,selector){
        $(selector).click(selectme);
    });

    $(selectors[0]).click();
});
于 2012-05-16T16:56:44.437 回答