0

私はフェード効果を実行しようとしています。これは、divをフェードアウトして、別のdivに置き換えます。そのために、最後にクリックされたdivの数を設定するlastDiv変数を作成しました。

しかし、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

あなたの中括弧はすべて台無しです:
私はあなたのコードを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
            })
        });
    }
});

ブラウザにエラーが表示されるはずです。

于 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はそれについて教えてくれませんでした。このようなエラーを確認できるように、FirefoxなどのアドオンであるFireBugをインストールしてみてください。function() {if

また、このコードを1行に記述しないでください。どうやって読むのかわかりません。

于 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

class="content"div があり、クリック可能な要素がclass="item"あり、属性data-i = nがn1、2、3 であると仮定しましょう。

すべてのコンテンツ div を無条件にフェードアウトすることでコードを大幅に簡素化できますが、実際にフェードアウトするのは 1 つだけであり (その他は非表示のまま)、フェードインする正しいコンテンツ 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 に答える