Question

我在网上发现了这个snipplet并对其进行了修改，所以我希望它对我有用：

<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（ '主体'）;。）

当我使用像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事件

1 个答案: