1

この jQuery コードをクリーンアップしたいのですが、何か提案はありますか? 追加する都市は約 20 あります。このコードは、マップ上の領域にカーソルを合わせると、各都市に CSS クラスを追加します。

$("#Auckland").mouseover(function(){                                                
                $(".Auckland").addClass("area");        
        }); 

        $("#Auckland").mouseout(function(){                                             
                $(".Auckland").removeClass("area");     
        }); 

        $("#Northland").mouseover(function(){                                               
                $(".Northland").addClass("area");       
        }); 

        $("#Northland").mouseout(function(){                                                
                $(".Northland").removeClass("area");        
        }); 

        $("#Rodney").mouseover(function(){                                              
                $(".Rodney").addClass("area");      
        }); 

        $("#Rodney").mouseout(function(){                                               
                $(".Rodney").removeClass("area");       
        });
4

4 に答える 4

2

Plzはこれを試してみてください:)

明らかな利点は、記述するコードが少なくなることです。作成と管理がより簡単かつ迅速になります。しかし、コードも高速に実行されます。チェーンなしの最初のスニペットを見てください。すべての行は、最初に DOM 全体でオブジェクトを検索し、次にそのオブジェクトに対してメソッドを実行するように jQuery に指示します。チェーンを使用すると、jQuery はオブジェクトを 1 回検索するだけで済みます。

$("#Auckland,#Northland,#Rodney").mouseover(function() {
    $(this).addClass("area"); // you can do - > $("." + this.id) if you want to add calss to all the emelents with taht class
     // you can do - > you can also change it with the class name depending your needs
});

$("#Auckland,#Northland,#Rodney").mouseout(function() {
    $(this).removeClass("area");
});

よく読んでください：http://tobiasahlin.com/blog/quick-guide-chaining-in-jquery/

& http://www.jquery-tutorial.net/introduction/method-chaining/

于 2012-07-15T21:37:22.833 に答える
2

citiesすべての要素にようなクラスを追加して、これを試すことができます：

$(".cities").mouseover(function(){                                                
     $("." + this.id).addClass("area");        
}); 

$(".cities").mouseout(function(){                                                
     $("." + this.id).removeClass("area");        
});
于 2012-07-15T21:37:51.460 に答える
2 
$('#Auckland,#Northland,#Rodney').hover(function(){
     $('.'+this.id).addClass("area");
},function(){
     $('.'+this.id).removeClass("area");
});
于 2012-07-15T21:35:56.340 に答える
1

・・・のように書けると思います。

$('#Auckland, #Northland, #Rodney').hover(function() {
  var targetClass = this.id;
  $('.' + targetClass).addClass('area'); 
}, function() {
  var targetClass = this.id;
  $('.' + targetClass).removeClass('area');
});

あなた (または誰か) は、これを単に で書き直したいと思うかもしれませんがtoggleClass、それは間違った動きです。) そして、これはうまくいくはずです。

于 2012-07-15T21:35:38.200 に答える