Я хотел бы очистить этот код jQuery, любые предложения?

Question

Я хотел бы очистить этот код 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");  
     }); 

Answer 1

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

Answer 2

Я полагаю, что можно записать так же, как ...

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

Вы (или кто-то) может возникнуть соблазн переписать только с toggleClass, но это ложный шаг, см: если кто-то обновляет страницу, удерживая мышь над одним из целевых объектов, зависание становится прикрученным.) И это, я полагаю, должно работать правильно.

Answer 3

Plz Попробуйте Цепной их вместе :)

Очевидным преимуществом является то, вы пишете меньше кода. Легче и быстрее писать и управлять. Но ваш код также работает быстрее. Посмотрите на первый фрагмент без цепочки. Каждая строка сообщает jQuery для первого поиска всей DOM для объекта, а затем запускает метод для этого объекта. Когда мы используем цепочку, jQuery должен искать объект только один раз.

$("#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/

Answer 4

вы можете добавить класс как cities ко всем элементам и попробовать это:

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

$(".cities").mouseout(function(){             
    $("." + this.id).removeClass("area");   
});