jQuery:鼠标悬停使图像可见，具有相同的最后4个数字在他们的id作为触发器

jQuery: mouseover makes image visible that has the same last 4 numbers in their id as the trigger

本文关键字：数字 4个 最后 他们的 触发器 id 悬停 鼠标 图像 jQuery      更新时间：2023-09-26

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

在网站上，我有小点(图像)，id为"dot0001"，"dot0002"，"dot0003"等。我也有隐藏图像(可见性:隐藏)与id"info0001"，"info00002"，"info0003"，等。

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

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

我给了它无尽的尝试，但没有得到任何地方，甚至没有一个点粘贴我的代码。

感谢任何帮助!

这样应该可以工作(虽然没有测试):

$('[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选择器选择所有以"dot"开头的id元素，然后将事件处理程序绑定到它们。事件处理函数本身只是简单地将id的"dot"部分替换为"info"以形成正确的新元素，然后根据需要显示或隐藏元素。

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

获取id以"dot"开头的所有元素，并在鼠标悬停/出时显示/隐藏相关的"info":

$("[id^=dot]").hover(
  function(){
    $("#info" + this.id.substring(3)).css({"visibility":"visible"});
  },
  function(){
    $("#info" + this.id.substring(3)).css({"visibility":"hidden"});
  }
);
http://jsfiddle.net/EGBnR/

相关文章：