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

时间:2012-07-27 18:53:01

标签: jquery jquery-selectors

刚开始使用jQuery。我最终在这里用了一些丑陋的代码来动态地改变世界地图各个区域的背景。我正在为mouseovermouseout两次构建相同的选择器。 (这就是hover的作用:将两者合并......是吗?)有更清洁的方法吗?也就是说,只构建一次并且能够同时使用它们吗?

$('.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');
  }
);

3 个答案:

答案 0 :(得分:1)

$('.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 docs

  

调用$(selector).hover(handlerIn,handlerOut)是:

的简写      

$(选择器).mouseenter(handlerIn).mouseleave(handlerOut);

答案 1 :(得分:0)

创建自定义类并使用.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-<whatever>类添加到样式表中,您就可以了。

答案 2 :(得分:0)

我更喜欢可读性,而不是制作紧凑的代码:

$('.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', '');
     }
}