0

#printInteractナビゲーション項目がコンテナーの境界線をトリガーして色を変更するスクリプトを作成しようとしている jQuery はまったく初めてです。これはうまくいくはずだと感じましたか？これはシマンティクス エラーですか? そうでない場合、誰かが私がどこで間違ったのかを少し説明できますか?

jQuery: 

$(document).ready(function(){
var printBorder = $("#container").css("border-color", "blue");
function changeBorder() {printBorder}
$("#printInteract").on("click", changeBorder);

});

CSS
#コンテナ{高さ:95%; 位置:相対;.clearfix(); border:.1875em #fff solid;}

HTML

 <nav>
    <ul class="navSpaces">
    <li class="navCenter"><a class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/logo30px.png" /><h3>all</h3></div></a></li>
    <li id="printInteract" class="navCenter"><a class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/logo30px.png" /><h3>print</h3></div></a></li>
    <li class="navCenter"><a class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/logo30px.png" /><h3>video</h3></div></a></li>
    <li class="navCenter"><a class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/logo30px.png" /><h3>web</h3></div></a></li>
    </ul>
  </nav>
4

2 に答える 2

3

あなたは近くにいますが、少しずれています。あなたの間違いを説明するためにあなたのコードにコメントしました。

$(document).ready(function(){
    //grab the container whose border you want to change
    var container = $("#container");

    //when this function is called, change the border
    function changeBorder() {
        container.css({'border' : '1px black solid'});
    }

    //watch for the click event and call your function
    $("#printInteract").on("click", changeBorder);
});

さらに、この場合、changeBorder はあまり役に立ちません。つまり、境界のみを変更します。この場合、関数を定義して呼び出すのではなく、無名関数を渡すことができます。

$(document).ready(function(){
    //grab the container whose border you want to change
    var container = $("#container");

    //watch for the click event and call your function
    $("#printInteract").on("click", function(){
        //this is the anonymous function. This will only
        // be executed when a click event is triggered
        container.css({'border' : '1px black solid'});
    });
});

脚注: コンテナーの jquery オブジェクトを取得して変数に格納する部分をスキップすることもできます。これは、そのオブジェクトを (境界線の変更中に) 1 回しか参照しないためです。ただし、そのオブジェクトを複数回参照する場合は、上記のコードのようにオブジェクトを変数に「キャッシュ」するのがベスト プラクティスと見なされます。これは、jQuery オブジェクトを要求するたびに、jQuery が DOM を走査して、セレクターに一致するすべての要素を探す必要があるためです。したがって、オブジェクトをキャッシュすることで、わずかにパフォーマンスが向上します。

編集：

4 つのクリック ハンドラーを使用せずに、探していることを実行するためのより良い方法があります。実際、1 つのページで使用するイベント リスナーの数は、それぞれに負担がかかるため、最小限に抑えるようにしてください。

探しているものを実現する 1 つの方法は、ルックアップ テーブルとして機能する Javascript オブジェクトを作成することです。

デモはこちら

これは私が使用した Javascript / Jquery コードです。

//this is the lookup table that maps
// id with the color scheme
var borderScheme = {
    'printInteract' : '1px solid blue',
    'videoInteract' : '1px solid orange',
    'webInteract' : '1px solid pink',
    'allInteract' : '1px solid white'
};

$(document).ready(function(){
    // i am applying border to the entire nav element
    var nav = $('nav');

    //we attach a single click listener on li elements
    $('li').on('click',function(){

        // get the id of the clicked li
        var id = $(this).attr('id');

        // lookup the corresponding border scheme from the lookup table
        var color = borderScheme[id];

        // was there a color defined?
        if (color != 'undefined') {
            // if yes, make the change
            nav.css({'border': color});
        }
    });
});

​
于 2012-06-06T06:23:48.117 に答える
0

この解決策を確認してください：

http://jsfiddle.net/6VLgJ/

この助けとあなたのために働くことを願っています

于 2012-06-06T06:24:56.680 に答える