2

刚开始使用 jQuery。我在这里得到了一些丑陋的代码来动态改变世界地图各个区域的背景。我为mouseoverand构造了两次相同的选择器mouseout。（这就是它的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');
  }
);
4

3 回答 3

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文档：

调用 $(selector).hover(handlerIn, handlerOut) 是以下的简写：

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

于 2012-07-27T18:56:06.027 回答
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', '');
     }
}
于 2012-07-27T20:06:42.503 回答
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>类添加到您的样式表中，您就可以开始了。

于 2012-07-27T18:55:07.457 回答