0

我目前在一个网站上工作并遇到以下问题：

在网站上，我有 ID 为“dot0001”、“dot0002”、“dot0003”等的小点（图像）。我还有隐藏图像（可见性：隐藏），ID 为“info0001”、“info00002”、“info0003”等。

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

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

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

任何帮助表示赞赏！

4

2 回答 2

2

像这样的东西应该可以工作（尽管未经测试）：

$('[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以“点”开头的元素，然后将事件处理程序绑定到它们。事件处理函数本身只需用“info”替换“点”部分id以形成正确的新元素，然后根据需要显示或隐藏元素。

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

于 2013-01-15T23:57:01.853 回答
1

获取 id 以“点”开头的所有元素，并在鼠标悬停/移出时显示/隐藏相关的“信息”：

$("[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/

于 2013-01-16T00:00:54.047 回答