Question

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

在网站上我有小点（图像）和ids“dot0001”，“dot0002”，“dot0003”等。我还有隐藏的图像（可见性：隐藏）与ids“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选择器选择{“1}}以”dot“开头的所有元素，然后将事件处理程序绑定到它们。事件处理函数本身只是将id的“点”部分替换为“info”以形成正确的新部分，然后根据需要显示或隐藏元素。

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

Answer 2

获取以＆＃34; dot＆＃34;开头的所有ID元素并显示/隐藏相关的＆＃34;信息＆＃34;在mouseover / out上：

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

jQuery：mouseover使图像可见，其id中的最后4个数字与触发器相同

2 个答案: