-1

サイトを作成していますが、このコードを使用すると、1 つの .html ファイルに複数のページを含めることができます。このコードの反復性を回避できますか? 単純化できますか？

<script type="text/javascript">
        var x = 300;
        $(function() { 
            $("#indexLink").click(function() { 
                $("#content>div").not("#start").hide(x);
                $("#index").show(x);
                $('nav>ul>li').removeClass('active');
                $('#indexLink').addClass('active');
            });

            $("#leerlingLink").click(function() { 
                $("#content>div").not("#start").hide(x); 
                $("#leerling").show(x); 
                $('nav>ul>li').removeClass('active');
                $('#leerlingLink').addClass('active');
            });

            $("#bestemmingLink").click(function() { 
                $("#content>div").not("#start").hide(x); 
                $("#bestemming").show(x);
                $('nav>ul>li').removeClass('active');
                $('#bestemmingLink').addClass('active');
            });

            $("#betalingLink").click(function() { 
                $("#content>div").not("#start").hide(x); 
                $("#betaling").show(x);
                $('nav>ul>li').removeClass('active');
                $('#betalingLink').addClass('active');
            });
        });

</script>
4

3 に答える 3

1

クリックされているものがアンカーリンク以外のものであると仮定すると、要素にすべて同じクラスを与えて、これを一度書くことができます-

編集：これらがアンカーリンクであるという情報に基づいて変更を加えました。

$('.classname').click(function(event) {
    event.preventDefault(); 
    $("#content>div").not("#start").hide(x);
    var idString = this.id
    var shortIDString = idString.slice(0,-4); //remove the 'Link'
    $("#" + shortIDString).show(x);
    $('nav>ul>li').removeClass('active');
    $(this).addClass('active');
});
于 2013-02-05T19:48:21.517 に答える
0

forループを使用して、セレクターを作成できます。

$(function () {
    var items = ["index", "leerling", "bestemming", "betaling"];
    for (var i = 0; i < items.length; i++) {
        var item = items[i];
        $("#" + item + "Link").click(function () {
            $("#content>div").not("#start").hide(x);
            $("#" + item).show(x);
            $('nav>ul>li').removeClass('active');
            $('#' + item + 'Link').addClass('active');
        });
    }
});

allにハンドラーを追加し#whateverLinks、イベントターゲットのid値に基づいてリンク名を検出することもできます。

于 2013-02-05T19:45:14.987 に答える
0

どういう意味iterative-nessですか？

コードをDRYにしたい場合は、次のように記述できます。

<script type="text/javascript">
    var x = 300;
    $(function () {
        $("#indexLink,#betalingLink,#bestemmingLink,#leerlingLink").click(function () {
            $("#content>div").not("#start").hide(x);
            $("#"+$(this).attr("id").slice(0,-4)).show(x);
            $('nav>ul>li').removeClass('active');
            $('#indexLink').addClass('active');
        });
    });
</script>

これにより、すべてのセレクターが一度に1つずつ取得され、すべてのセレクターで、基本的に入力したものと同じコードが実行されますが、1つのセレクターでのみ実行されます。

編集

divの表示を修正

EDIT2

それが機能していることを示すためにjsfiddleを追加しました：http：//jsfiddle.net/NicosKaralis/Vurjf/

于 2013-02-05T19:46:47.413 に答える