我在网上找到了这个片段并对其进行了修改，所以我希望它对我有用:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<style type="text/css">
#hint{
cursor:pointer;
}
.tooltip{
margin:8px;
padding:8px;
border:1px solid blue;
background-color:lightblue;
position: absolute;
z-index: 2;
}
</style>
</head>
<body>
<h1>Testpage</h1>
<label id="username">Username : </label><input type="text" / size="50">
<span id="hint">Tooltip</span>
<script type="text/javascript">
$(document).ready(function() {
var changeTooltipPosition = function(event) {
var tooltipX = event.pageX + 15;
var tooltipY = event.pageY - 20;
$('div.tooltip').css({top: tooltipY, left: tooltipX});
};
var testext = {
"hint_text": {
"attr1": "String1/1",
"attr2": "String1/2"
},
"username_text": {
"attr1": "String2/1",
"attr2": "String2/2"
}
};
var showTooltip = function(event, id) {
var outputid= id+"_text";
$('div.tooltip').remove();
$('<div class="tooltip">'+testext[$outputid]['attr2']+'</div>')
.appendTo('body');
changeTooltipPosition(event);
};
var hideTooltip = function() {
$('div.tooltip').remove();
};
$("span#hint,label#username'").bind({
mousemove : changeTooltipPosition,
mouseenter : showTooltip,
mouseleave: hideTooltip
});
});
</script>
</body>
</html>
例如，我有 id“hint”，并且我想使用hint_text/attr2 工具提示。因此，我获取 id ( var showTooltip = function(event, id)) 并向其附加“_text” (var outputid= id+"_text";)，然后使用它来获取工具提示 ($(''+testext[$ outputid]['attr2']+'').appendTo('body');)。
当我使用像 testext['hint_text']['attr2'] 这样的静态值时，它可以工作，但像这样我无法完成它。
我哪里出错了？
有什么想法吗？
提前致谢。
最佳答案
嗨，请尝试以下代码....
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<style type="text/css">
#hint{
cursor:pointer;
}
.tooltip{
margin:8px;
padding:8px;
border:1px solid blue;
background-color:lightblue;
position: absolute;
z-index: 2;
}
</style>
</head>
<body>
<h1>Testpage</h1>
<label id="username">Username : </label><input type="text" / size="50">
<span id="hint">Tooltip</span>
<script type="text/javascript">
$(document).ready(function() {
var changeTooltipPosition = function(event) {
var tooltipX = event.pageX + 15;
var tooltipY = event.pageY - 20;
$('div.tooltip').css({top: tooltipY, left: tooltipX});
};
var testext = {
"hint_text": {
"attr1": "String1/1",
"attr2": "String1/2"
},
"username_text": {
"attr1": "String2/1",
"attr2": "String2/2"
}
};
var showTooltip = function(event, id) {
if(id!='document'){
var outputid= this.id+"_text";
$('div.tooltip').remove();
$('<div class="tooltip">'+testext[outputid]['attr2']+'</div>').appendTo('body');
changeTooltipPosition(event);
}
};
var hideTooltip = function() {
$('div.tooltip').remove();
};
$("span#hint,label#username").bind({
mousemove : changeTooltipPosition,
mouseenter : showTooltip,
mouseleave: hideTooltip
});
});
</script>
关于javascript - 带 JQuery 的工具提示事件和带 id 的数组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30775896/