重用jQuery选择器而不是构造它两次？

从jQuery开始。最后，我得到了一些丑陋的代码，可以动态更改世界地图各个区域的背景。我为

mouseover

和

mouseout

构造了两次相同的选择器。（这就是

悬停所做的：将两者结合起来……是吗？）？也就是说，只构建一次，并且能够同时用于这两种情况

$('.regionName').hover(  
  function() {
    var id = $(this).attr("id");
    id = (id.substring(0, 2));
    var region = "#" + id + "BG";
    $(region).css('background', 'url(images/world-map-' + id + '.png) no-repeat');
  },
  function() {
    var id = $(this).attr("id");
    id = (id.substring(0, 2));
    var region = "#" + id + "BG";
    $(region).css('background', 'none');
  }
);

不要使用
.css
方法，而是创建一个自定义类并使用
.toggleClass（）
。然后，您可以将两个功能合并为一个：

$('.regionName').hover(  
  function() {
    var id = $(this).attr("id");
    id = (id.substring(0, 2));
    var region = "#" + id + "BG";
    $(region).toggleClass('addbg-'+id); // add on mouseover, remove on mouseout
  }
);

现在将所有相关的
.addbg-
类添加到样式表中，就可以开始了

$('.regionName').on('mouseenter mouseleave', function(e) {
    var id = this.id.substring(0, 2);
    $("#" + id + "BG").css('background', e.type==='mouseenter'?'url(images/world-map-' + id + '.png) no-repeat':'none');
});

从jQuery：

调用$（选择器）.hover（handlerIn，handlerOut）是以下的缩写：

$（选择器）.mouseenter（handlerIn.mouseleave（handlerOut）

与其编写紧凑的代码，我更喜欢可读性：

$('.regionName').hover(  
    function() {
        var id = $(this).attr("id");
        regionHelper(id);
});

//performs the toggle
function regionHelper(id){
     id = id.substring(0, 2);
     var region = "#" + id + "BG";
     var element = $('#' + id);
     if (element.css('background').length == 0){
        element.css('background', 'url(images/world-map-' + id + '.png) no-repeat');
     } else {
        element.css('background', '');
     }
}

如果他有几百个身份证怎么办？如果你是对的，样式表会很长。然而，OP并没有这样或那样说。我知道，但在我看来，这并不重要，我们必须提供长期的解决方案和抽象的概念，为人们指明正确的方向。仅仅因为“它是正确的答案”或“它有效”而解决可能会产生风险。如果我们意识到这些风险，就必须提到它们。就我个人而言，我喜欢你的解决方案：）这是一种我也会采用的方法。