0

HTML、CSS、JavaScript を使用して Web サイトをプログラミングしています。クリックすると情報を表示する JavaScript を使用するページに 2 つのボタンがあります (スペースを節約するためにクリックすると、各ボタンが他の情報をフェードアウトします)。しかし、同じコードが他のボタンで機能しないのですか?

JavaScript :

<script type = text/javascript>
$('#scoreButton20102011').click(function() {
    $("#maleRec20102011").fadeIn(1000);
    $("#femaleRec20102011").fadeIn(1000);
    $("#maleRec20112012").fadeOut(1000);
    $("#femaleRec20112012").fadeOut(1000);
});
$('#scoreButton20112012').click(function() {
    $("#maleRec20112012").fadeIn(1000);
    $("#femaleRec20112012").fadeIn(1000);
    $("#maleRec20102011").fadeOut(1000);
    $("#femaleRec20102011").fadeOut(1000);
});​
</script>

2010/11 のボタンは両方のボタンのテキストを表示し、2011/12 のボタンはすべてフェードアウトしますか? 理由がわかりません。

CSS :

#maleRec20112012 {
    border-top: 3px solid #000;
    border-left: 3px solid #000;
    border-right: 3px solid #000;
    border-bottom: 3px solid #000;
    position: absolute;
    display: none;
    right: 0;
    width: 350px;
    height: 400px;
}

#femaleRec20112012 {
    border-top: 3px solid #E6E6DC;
    border-left: 3px solid #E6E6DC;
    border-right: 3px solid #E6E6DC;
    border-bottom: 3px solid #000;
    position: absolute;
    display: none;
    left: 0;
    width: 350px;
    height: 400px;
}

#maleRec20102011 {
    border-top: 3px solid #E6E6DC;
    border-left: 3px solid #E6E6DC;
    border-right: 3px solid #E6E6DC;
    border-bottom: 3px solid #000;
    position: absolute;
    display: none;
    left: 0;
    width: 350px;
    height: 400px;
}

#femaleRec20102011 {
    border-top: 3px solid #E6E6DC;
    border-left: 3px solid #E6E6DC;
    border-right: 3px solid #E6E6DC;
    border-bottom: 3px solid #000;
    position: absolute;
    display: none;
    left: 0;
    width: 350px;
    height: 400px;
}
4

2 に答える 2

0

使ってみてください

   <script type = text/javascript>
            $('#scoreButton20102011').live('click',function()
            {
                $("#maleRec20102011").fadeIn(1000);
                $("#femaleRec20102011").fadeIn(1000);
                $("#maleRec20112012").fadeOut(1000);
                $("#femaleRec20112012").fadeOut(1000);                  
            });
            $('#scoreButton20112012').live('click',function()
            {
                $("#maleRec20112012").fadeIn(1000);
                $("#femaleRec20112012").fadeIn(1000);
                $("#maleRec20102011").fadeOut(1000);
                $("#femaleRec20102011").fadeOut(1000);
            });

        </script>

またはコードをonready関数に入れてみてください

于 2012-04-27T20:28:37.620 に答える
0

この簡略化された JSFiddle は意図したとおりに機能しますか? http://jsfiddle.net/9JAGK/もしそうなら、あなたの問題は実際にはあなたのコードのどこかにあると思います。フェードイン/フェードアウトと競合する可能性のあるボタンまたはスタイルに割り当てられている可能性のある他のイベントを確認してください。

于 2012-04-27T20:47:02.910 に答える