gpt4 book ai didi

javascript - 带 JQuery 的工具提示事件和带 id 的数组

转载 作者:行者123 更新时间:2023-11-28 00:12:21 25 4
gpt4 key购买 nike

我在网上找到了这个片段并对其进行了修改,所以我希望它对我有用:

<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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com