Question

我有一个Jquery片段，可以正常使用我的图片地图，当我将鼠标悬停在导航菜单上时，鼠标悬停在地图上。但我必须在每个id或类上反复使用代码（DRY）。这是我在jsfiddle上的jQuery代码，但我还没有让它在jsfiddle中运行。

<a id="hoverlink1" href="#">mouse over this to trigger a hilight from an external element!</a>
<br />
<a id="hoverlink2" href="#">mouse over this to trigger a hilight from an external element!</a>
<br />
<a id="hoverlink3" href="#">mouse over this to trigger a hilight from an external element!</a>
<br />

<div id="hover1">hover this id</div>
<div id="hover2">hover this id</div>
<div id="hover3">hover this id</div>

这段代码就是我现在所拥有的代码，但是我必须在everey id

上做DRY

    $('#hoverlink1').mouseover(function(e) {
        $('#hover1').mouseover();
    }).mouseout(function(e) {
        $('#hover1').mouseout();
    }).click(function(e) { e.preventDefault(); });

也许看起来应该更像这样。这个人工作只是我的一个想法

    $(this).data('id').mouseover(function(e) {
                var target = $(this).data("target");
                $(target).mouseover();
            }).mouseout(function(e) {
                var target = $(this).data("target");
                $(target).mouseout();
            })

有没有办法改善这一点，所以我不必干嘛

Answer 1

如果为每个hoverlink添加一个公共类，则可以使用该类在所有对象上安装一个事件处理程序。然后，该事件处理程序可以解析hoverlink id中的数字，以构建相应的悬停ID，如下所示：

$(".hoverlink").on("mouseenter mouseleave", function(e) {
    var num = this.id.match(/\d+$/)[0];
    var color = e.type === "mouseenter" ? "red" : "black";
    $("#hover" + num).css("color", color);
}).on("click", function(e) {
    e.preventDefault();
});

工作演示：http://jsfiddle.net/jfriend00/o0y94bhm/

当链接被徘徊时，我并不真正理解你想要做什么，所以我只是简单地进行了一次颜色更改以使代码的功能可见，但你可以显然插入你想要的任何代码。 / p>

Answer 2

您可以使用class代替。虽然id在页面中应该是唯一的，但class可以遍布整个地方。

HTML

<a id="hoverlink1" class="hoverDelegate" data-target="hover1" href="#">mouse over this to trigger a hilight from an external element!</a>
<br />
<a id="hoverlink2" class="hoverDelegate" data-target="hover2" href="#">mouse over this to trigger a hilight from an external element!</a>
<br />
<a id="hoverlink3" class="hoverDelegate" data-target="hover3" href="#">mouse over this to trigger a hilight from an external element!</a>
<br />

<div id="hover1">hover this id</div>
<div id="hover2">hover this id</div>
<div id="hover3">hover this id</div>

的jQuery

$('.hoverDelegate').on({
    mouseover: function (e) {
        var delegateId = $(this).data('target');

        $('#' + delegateId).mouseover();
    },
    mouseout: function (e) {
        var delegateId = $(this).data('target');

        $('#' + delegateId).mouseover();
    },
    click: function (e) {
        e.preventDefault();
    }
});

改进非DRY的jQuery代码段

2 个答案: