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

Question

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

<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”;) 然后使用它来获取工具提示 ($(''+testtext[$ outputid]['attr2']+'').appendTo('body');).

当我使用像 testext['hint_text']['attr2'] 这样的静态值时，它可以工作，但像这样我无法完成它。

我哪里错了？

有什么想法吗？

提前致谢。

Answer 1

您好，请尝试以下代码....

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

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

Tootip event with JQuery and array with id

html

javascript

arrays

jquery

jquery-tooltip