-1

有没有办法缩短我的代码。我需要添加大约 15 个更多功能，它们都做同样的事情。

$(document).ready(function() {
    $('.map-highligh').maphilight({

    });

    //north roll over
    $('#hilightlink').mouseover(function(e) {
        $('#north').mouseover();
    }).mouseout(function(e) {
        $('#north').mouseout();
    }).click(function(e) { e.preventDefault(); });

    //Wellington roll over
    $('#hilightlink-wel').mouseover(function(e) {
        $('#wellington').mouseover();
    }).mouseout(function(e) {
        $('#wellington').mouseout();
    }).click(function(e) { e.preventDefault(); });

});
4

5 回答 5

2

您可以使用一些组合来清理代码。

function makeTrigger(id, eventName) {
    return function(e) {
        $('#' + id).trigger(eventName);
    };
}

function prevent(e) {
    e.preventDefault();
}

$('#hilightlink')
.mouseover(makeTrigger("north", "mouseover"))
.mouseout(makeTrigger("north", "mouseout"))
.click(prevent);
于 2012-05-02T00:22:00.477 回答
0 
$.fn.rollOver = function(selector) {
    this.on('mouseover mouseout', function(e) { $(selector).trigger(e.type); });
    this.on('click', function(e) { e.preventDefault(); });
    return this;
}
$('#hilightlink').rollOver('#north');
$('#hilightlink-wel').rollOver('#wellington');
于 2012-05-02T00:26:02.123 回答
0

在没有看到我们可以利用哪些 DOM 关系来利用它的情况下，我将数据放在一个表中并遍历该表，因此只有一个代码副本，您可以在不更改执行代码的情况下添加/删除/修改标识符：

var hoverItems = [
    "highlightlink", "north",
    "highlightlink-wel", "wellington"
];

for (var i = 0; i < hoverItems.length; i+= 2) {
    (function(item$) {
        $("#" + hoverItems[i]).hover(function() {
            item$.mouseover();
        }, function() {
            item$.mouseout();
        }).click(function(e) {e.preventDefault();});
    })($(hoverItems[i+1]));
}

或者，稍微不同的方式，使用查找表：

var hoverItems = {
    "highlightlink": "north",
    "highlightlink-wel": "wellington"
};

$("#" + Object.keys(hoverItems).join(", #")).hover(function() {
    $("#" + hoverItems[this.id]).mouseover();
}, function() {
    $("#" + hoverItems[this.id]).mouseout();
}).click(function(e) {e.preventDefault();});

第二种方法需要 ES5 或ES5垫片。Object.keys()

要使用其中任何一种方法添加更多项目，只需将更多项目添加到数据表 - 您无需编写新的一行执行代码。

于 2012-05-02T00:28:47.820 回答
0

您可能想要重新考虑您的 UI，但您可以执行以下操作：

function mouseBind(bound, affected) {
   $('#' + bound)
      .mouseover(function () {
         $('#' + affected).mouseover();
      })
      .mouseout(function () {
         $('#' + affected).mouseout();
      })
      .click(function (e) { e.preventDefault(); })
   ;
}

mouseBind('hilightlink', 'north');
mouseBind('hilightlink-wel', 'wellington');
于 2012-05-02T00:20:07.203 回答
0

您可以在不更改 HTML 代码的情况下使用此功能：

function bind_block(button, element) {
  button.mouseover(function(e) {
    element.mouseover();
  }).mouseout(function(e) {
    element.mouseout();
  }).click(function(e) { e.preventDefault(); });
}

bind_block($('#hilightlink'), $('#north'));
bind_block($('#hilightlink-wel'), $('#wellington'));

如果您需要为 15 个不同的元素绑定此事件，最好使用 CSS 类。请提供您的 HTML 以获得更多帮助。

于 2012-05-02T00:20:18.393 回答