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

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 3

您可以向所有元素添加类似cities的类，然后尝试：

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

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

Answer 4

我想这可以写成......

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

你（或某人）可能只想用toggleClass来改写它，但这是一个错误的举动，请参阅：如果有人刷新一个鼠标悬停在其中一个目标物品上的页面，则悬停变得紧张。我认为，这应该是正确的。

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

4 个答案: