1

jQuery / JavaScript を使ったコーディングは初めてです。以下のコードを書くことができましたが、もっと簡単に書き留める方法があると思います。方法を教えてくれる人はいますか？

$(document).ready(function(){
$(".btn_home").click(function(){
$("#article1").fadeIn();
$("#article2").fadeOut();
$("#article3").fadeOut();
$("#article4").fadeOut();

$("#blended").fadeOut();
$("#contact").fadeOut();
});

$(".btn_prt").click(function(){
$("#article1").fadeOut();
$("#article2").fadeIn();
$("#article3").fadeOut();
$("#article4").fadeOut();


$("#over").fadeIn();
$("#blended").fadeOut();
$("#contact").fadeOut();
});

$(".btn_blog").click(function(){
$("#article1").fadeOut();
$("#article2").fadeOut();
$("#article3").fadeIn();
$("#article4").fadeOut();

$("#over").fadeOut();
$("#blended").fadeIn();
$("#contact").fadeOut();
});

$(".btn_abt").click(function(){
$("#article1").fadeOut();
$("#article2").fadeOut();
$("#article3").fadeOut();
$("#article4").fadeIn();

$("#over").fadeOut();
$("#blended").fadeOut();
$("#contact").fadeIn();
}); 
});
4

3 に答える 3

10

アイテムを組み合わせることができます：

$("#foo, #bar, #baz").fadeIn();

またはクラスを使用することができます

$('.notneeded').fadeOut();
于 2012-11-08T15:08:47.727 に答える
2

ここでの問題はコードの重複です。あなたはそれを助けるためにパラメータを持つ関数を使う必要があります。

$(document).ready(function() {
    $(".btn_prt").click(function(){
        fadeAllBut("#article2, #over");
    });

    $(".btn_blog").click(function(){
        fadeAllBut("#article3, #blended");
    });

    $(".btn_abt").click(function(){
        fadeAllBut("#article4, #contact");
    }); 
});

function fadeAllBut(itemsToFadeIn) {
    $(".fades").fadeOut();
    $(itemsToFadeIn).stop().fadeIn();
}

もちろん、fades フェードインまたはフェードアウトするすべてのアイテムにCSSクラスを与える必要があります。

于 2012-11-08T15:17:58.097 に答える
0 
$(document)
.ready(function () {
$(".btn_home")
    .click(function () {
    $("#article1")
        .fadeIn(), $("#article2")
        .fadeOut(), $("#article3")
        .fadeOut(), $("#article4")
        .fadeOut(), $("#blended")
        .fadeOut(), $("#contact")
        .fadeOut()
}), $(".btn_prt")
    .click(function () {
    $("#article1")
        .fadeOut(), $("#article2")
        .fadeIn(), $("#article3")
        .fadeOut(), $("#article4")
        .fadeOut(), $("#over")
        .fadeIn(), $("#blended")
        .fadeOut(), $("#contact")
        .fadeOut()
}), $(".btn_blog")
    .click(function () {
    $("#article1")
        .fadeOut(), $("#article2")
        .fadeOut(), $("#article3")
        .fadeIn(), $("#article4")
        .fadeOut(), $("#over")
        .fadeOut(), $("#blended")
        .fadeIn(), $("#contact")
        .fadeOut()
}), $(".btn_abt")
    .click(function () {
    $("#article1")
        .fadeOut(), $("#article2")
        .fadeOut(), $("#article3")
        .fadeOut(), $("#article4")
        .fadeIn(), $("#over")
        .fadeOut(), $("#blended")
        .fadeOut(), $("#contact")
        .fadeIn()
})
})
于 2012-11-08T23:54:46.207 に答える