我目前正在做一个网站,遇到了以下问题:
在网站上,我有小点(图像),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/