Question

我正在尝试淡化效果，淡化div并将其替换为另一个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>

Answer 1

你的牙套都搞砸了：
我将您的代码放在beautifier：

中

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
            })
        });
    }
});

浏览器中应该有错误！

Answer 2

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

$("#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部分位于function() {的结束标记之后，而不是if。这是一个语法错误，javascript没有告诉你。尝试安装FireBug，Firefox或类似的插件，以便您可以看到此类错误。

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

Answer 3

您的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;
            });
        });
    }
});

Answer 4

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

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;
            });
        });
    }
});

Answer 5

我们假设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
    });
});

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

Answer 6

我相信这就是你要做的事情：

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();
});

如果阻止jQuery不会让我这么做？

6 个答案: