【发布时间】：2016-12-14 12:31:51
【问题描述】：
第 12-22 行
函数openManu 当前在加载时显示一个块，并为我的数组创建一个 for 循环。然后根据数组创建一个obj 变量，并从调用该函数的链接定义的数组中获取Manufacturer。因此，例如我的 HTML 中的链接将有一个 onMouseOver 事件绑定到 openManu('manufacturer') 并且 manu 将被定义为制造商，只有与该制造商对应的数组中的“描述”才会插入到 HTML 中。
我的问题是我正在尝试创建另一个在此之前运行的函数，该函数通过我的数组并根据数组中的内容创建链接。然后，由于一旦正文加载就会调用它，因此应该存在链接，并且链接还将具有 onMouseOver 事件，其中可以调用第 12-22 行的第二个函数。
目前只有openManu() 工作onMouseOver 并将基于指定制造商的Description 插入到我的HTML 称为内容的对象中。我拥有的 createLinks() 函数打开数组并将 URL 定义为变量并将其插入到创建的链接标记中。
这可能吗？订单是否搞砸了？
javascript：
var arr =
[
{
"Manufacturer": "Any manufacturer",
"Description": "Traditional values",
"URL": "http://www.website.com"
},
{
"Manufacturer": "Different Manufacturer",
"Description": "Short description of said manufacturer",
"URL": "http://www.website2.com"
},
{
"Manufacturer": "A Similar Manufacturer",
"Description": "Not quite the same as the previous manufacturer",
"URL": "http://www.website3.com"
},
{
"Manufacturer": "Manufacturer",
"Description": "Essentially a ripoff of the first manufacturer",
"URL": "http://www.website4.com"
}
]
function createLinks() {
for (var i=0; i<arr.length; i++){
var obj = arr[i];
var m = obj["Manufacturer"];
if (manu == m) {
URL = obj["URL"];
}
}
document.getElementById('col').innerHTML = "<a onmouseover=\"openManu(\'" ++ m ++ "\')\" onmouseout=\"mouseOut()\" onClick=\"openWeb(\'" ++ URL ++ "\')\">" ++ m ++ "</a>");
}
function openManu(manu) {
document.getElementById('content').style.display = 'block';
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';
}
var mouseOut = function(){
document.getElementById('content').style.display = 'none'
}
function openWeb(URL) {
window.open(URL);
}#container{
width:870px;
margin-top:2em;
font-size:1.1em;
position:relative;
padding-left:20px;
display:inline-block;
background-color:#3C3C4E;}
#content{
z-index:1;
display:none;
width:300px;
font-size:16px;
font-family: 'Raleway', sans-serif;
position:absolute;
padding:10px;
background-color:white;}
a {
cursor:pointer;
padding:0;
display:inline-block;
margin:0;
color: white;
font-family: 'Raleway', sans-serif;
position:inherit;
}
h4 {
padding:0;
z-index:0;
display:inline-block;
margin:0;
color: white;
font-family: 'Raleway', sans-serif;
font-weight:normal;
font-size:15px;
background-color:#3C3C4E;
position:absolute;
left:8px;
padding:24px;
top:400px;
width:842px;
}
pre {
display:block;
float:left;
line-height:21px;
}<!DOCTYPE html>
<html onload="createLinks()">
<div id="content"></div>
<pre id="col"></pre>
</html>旧的 HTML 包含看起来像这样的链接。
<a onmouseover="openManu('Any manufacturer')" onmouseout="mouseOut()" onClick="openWeb('http://www.website.com/')">Any manufacturer</a>
@Zer00ne 响应您的回答，我将 createLinks() 更改为此。我无法让它工作我可能不完全理解你的解决方案。
function createLinks() {
arr[i]["Manufacturer"]
var obj = arr[i];
var m = obj["Manufacturer"];
document.getElementById('col').innerHTML = "<a onmouseover=\"openManu(\'" ++ m ++ "\')\" onmouseout=\"mouseOut()\" onClick=\"openWeb(\'" ++ URL ++ "\')\">" ++ m ++ "</a>");
}
【问题讨论】：
-
不会更容易做到这一点：
arr[i]["Manufacturer"]比var obj = arr[i]; var m = obj["Manufacturer"];？ -
在
innerHTML中添加 HTML 事件会让小猫哭泣。为什么不createElement('a')直接在 JavaScript 中附加事件。在代码中使用函数引用比让浏览器解析 HTML 和eval()字符串更高效且更容易推理，这将引入 XSS（跨站点脚本）问题。 -
我明白了，我已经纠正了
createLinks()，但现在又出现了一系列错误...... -
>>Zer00ne 响应您的回答，我将 createLinks() 更改为此。我无法让它工作我可能不完全理解你的解决方案。innerHTML 生成的正确事件实际上确实让小猫哭了。我会走
createElement('a')的路，但我没时间了。
标签： javascript html arrays loops for-loop