Question

有没有办法缩短我的代码。我需要添加大约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(); });

});

Answer 1

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

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);

Answer 2

您可能想重新考虑这个用户界面的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');

Answer 3

您可以在不更改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以获得更多帮助。

Answer 4

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

Answer 5

如果没有看到我们可以利用哪些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或Object.keys()方法{/ 3}}。

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

将功能连接在一起 - 更清晰的代码

5 个答案: