我想清理一下这个jQuery代码，有什么建议吗？

我想清理一下这个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");       
        }); 

---

我想这可以写成

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

---

您（或其他人）可能会试图用

切换类

来重写此内容，但这是一个错误的动作，请参见：如果有人用鼠标在某个目标项上刷新页面，则悬停会出错。）我想，这个应该可以很好地工作。

我想它可以写成

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

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

---

您（或其他人）可能会试图用

切换类

来重写此内容，但这是一个错误的动作，请参见：如果有人用鼠标在某个目标项上刷新页面，则悬停会出错。）我想，这个应该可以正常工作。

请尝试将它们链接在一起：）

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

明显的好处是您编写的代码更少。编写和管理起来更容易、更快。但是您的代码也运行得更快。查看第一个没有链接的片段。每一行都告诉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");
});

好书：

---

&请尝试将它们链接在一起：）

明显的好处是您编写的代码更少。编写和管理起来更容易、更快。但是您的代码也运行得更快。查看第一个没有链接的片段。每一行都告诉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");
});

好书：

---

&

您可以向所有元素添加一个类，如

cities

，然后尝试以下操作：

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

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

---

您可以向所有元素添加一个类，如

cities

，然后尝试以下操作：

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

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

---

与其附加这么多事件侦听器，不如将一个事件侦听器附加到父元素，然后进行筛选。请参阅

.on（）

的文档，不要附加那么多事件侦听器，而应该将一个事件侦听器附加到父元素，然后进行筛选。请参阅（）上的

.on（）

@Raminson

：）

我刚刚意识到您没有定义：）thanks@Raminson

：）

我刚意识到你没有定义：）谢谢