javascript - jQuery:鼠标悬停使图像可见，其 id 中的最后 4 个数字与触发器相同

Question

我目前正在开发一个网站，并遇到了以下问题:

在网站上，我有一些小点(图像)，id 为“dot0001”、“dot0002”、“dot0003”等。我还有隐藏图像(可见性:隐藏)，其 ID 为“info0001”、“info00002”、“info0003”等。

我正在寻找 jQuery 解决方案。我需要的是允许以下事件的代码:

当用户将鼠标移到“dot0001”上时，图像“info0001”变得可见，而当用户离开“dot0001”时，“info0001”再次变得不可见。同样适用于“dot0002”-“info0002”、“dot0003”-“info0003”等。因此，只有具有相应 4 位数字的信息图像才可见。

我进行了无数次尝试，但一无所获，甚至没有粘贴我的代码的意义。

任何帮助表示赞赏!

Answer 1

这样的东西应该可以工作(尽管未经测试):

$('[id^="dot"]').on({
    mouseenter: function(e) {
        var infoId = this.id.replace('dot', 'info');
        $('#' + infoId).show();
    },
    mouseleave: function(e) {
        var infoId = this.id.replace('dot', 'info');
        $('#' + infoId).hide();
    }
});

它使用 attribute-starts-with选择器选择 id 以“dot”开头的所有元素，然后将事件处理程序绑定(bind)到它们。事件处理函数本身只需将 id 的“点”部分替换为“info”即可形成正确的新部分，然后根据需要显示或隐藏该元素。

不要忘记将该代码包装在 DOM ready 中事件处理程序，以便在元素实际存在时执行，否则它将无法工作。