Question

我有一个带有不同链接的html文件，如果你将鼠标悬停在它们上面，我曾经有一个工具提示来提供公司的描述。我想在这里用JSON和CSV将这一切分开到JSON，但是我无法得到这样的描述＆＃39;该公司回到这里的HTML。

如果我将鼠标悬停在链接上，它将启动一个OnMouseOver事件并定义一个变量＆＃34; manu＆＃34;与制造商的名称。然后它将在函数openManu的末尾返回制造商的描述。然后我需要获取返回的字符串并将其插入ID = content的对象中的html中。我认为我的代码存在根本性的问题，我需要帮助找到它的内容。

＆＃34;内容＆＃34; div应该跟随MouseEvent clientX和clientY的鼠标光标。它应包含与制造商对应的描述文本。

＆＃13;

function openWeb(URL) {
  window.open(URL);}

function openManu(manu) {
    var manu = ""
    var arr =   [
      {
        "Manufacturer": "Generic Company",
        "Description": "Brief description of said generic company"
      },
      {
        "Manufacturer": "Different company",
        "Description": "A description of this different company"
      }
    ]

    for (var i=0; i<arr.length; i++){
      var obj = arr[i];
      var m = obj["Manufacturer"];
      if (manu == m) {
        return obj["Description"];
      }

    var desc = func("openManu")

    try {
      document.getElementById('content').innerHTML = desc
    }

}



return "";

var tooltipSpan = document.getElementById('content');

window.onmousemove = function (e) {
    var x = e.clientX,
        y = e.clientY;
    tooltipSpan.style.top = y + 'px';
    tooltipSpan.style.left = (x + 20) + 'px';
}
//if mouse leaves link area, hide text file container
function mouseOut()
{
	document.getElementById('content').style.display = 'none'
}

}

＆＃13;

<div id="content"></div>

<pre style="float:left;">
<a onmouseover="openManu('Generic Company')" onmouseout="mouseOut()" onClick="openWeb('http://www.stackoverflow.com/')">Generic Company</a>
<a onmouseover="openManu('Different company')" onmouseout="mouseOut()" onClick="openWeb('http://www.stackoverflow.com/')">Different Company</a>
</pre>

＆＃13;

Answer 1

function openManu(manu) {
   document.getElementById('content').style.display = 'block'
    var arr =   [
      {
        "Manufacturer": "Generic Company",
        "Description": "Brief description of said generic company"
      },
      {
        "Manufacturer": "Different company",
        "Description": "A description of this different company"
      }
    ]
    
    var desc
    
    for (var i=0; i<arr.length; i++){
      var obj = arr[i];
      var m = obj["Manufacturer"];
      if (manu == m) {
        desc = obj["Description"];
      }
    }
    document.getElementById('content').innerHTML = desc
}


window.onmousemove = function (e) {
    var tooltipSpan = document.getElementById('content');
    var x = e.clientX,
        y = e.clientY;
    tooltipSpan.style.top = (y - 20) + 'px';
    tooltipSpan.style.left = x + 'px';
}
//if mouse leaves link area, hide text file container
var mouseOut = function(){
  document.getElementById('content').style.display = 'none'
}

#content {
  position: absolute;
  background-color: grey;
  opacity: 0.75;
  border: 1px solid black;
  color: white;
 }

<div id="content"></div>

<pre style="float:left;">
<a onmouseover="openManu('Generic Company')" onmouseout="mouseOut()" onClick="openWeb('http://www.stackoverflow.com/')">Generic Company</a>
<a onmouseover="openManu('Different company')" onmouseout="mouseOut()" onClick="openWeb('http://www.stackoverflow.com/')">Different Company</a>
</pre>

一些问题 -

on mouseOver，将显示更改回块（或其他）
各种职能范围内的问题
您正在将manu重新定义为函数顶部的空字符串，否定您从HTML传递的内容
您的for循环未更改变量或返回任何可用的内容
我认为你在for循环中不想要的一些功能嵌套在它里面。正确的缩进将帮助您注意这些问题。
我在使用UI时学到的东西 - 工具提示最好显示在您悬停的位置之上，因为大多数人从上到下滚动

将对象从数组返回到html javascript

1 个答案: