Javascript 需要悬停时数组中项目的索引号

我对JavaScript比较陌生，我正在做一个简单的项目。但是我被卡住了，我想听听关于如何找到解决办法的意见。 我有一个简短的产品阵列，如：

var products = [
   {
    name: "paper",
    price: 2.00,
    description: "White College-ruled Paper, 100 sheets",
    location: "Aisle 5"
   },
   {
    name: "pens",
    price: 5.00,
    description: "10 Pack, Black Ink Ball Point Pens"
    location: "Aisle 2"
   },
   {
    name: "paper clips",
    price: 0.50,
    description: "Silver Paper Clips, 100 count"
    location: "Aisle 6"
   }
  ]

我使用JS循环遍历这个数组，并将结果打印到id为“output”的DIV中的页面

功能打印（消息）{
var outputDiv=document.getElementById（'output'）；
outputDiv.innerHTML=消息；
}
对于（变量i=0；i'；
message+='$'+product.price+''；
消息+=''
}
打印（信息）；

所有这些都很好。我在页面上有我的产品。现在，我想要的是当鼠标悬停在任何一个item div上时，在一个单独的div中显示其他信息（例如位置）。 我的问题是-如何识别悬停项目的索引号？到目前为止，索引号只存在于for循环中，我不知道如何在不同的函数中访问它

---

同样，我的知识是有限的，所以我不确定在for循环中编写HTML是否是最好的方法。我真的很感激任何建议或批评

创建具有所需索引号的div时，尝试添加提示工具

---

您的代码中确实存在一些错误：滥用

id

。许多元素将具有id

prod block

，

prod description

，但具有id

id

---

执行此操作时，只需检查id即可轻松检测悬停的元素。有多种技术可以做到这一点，如果您想学习jQuery，这非常容易开始。

如果使用jQuery，可以使用data（）定义DOM元素的数据属性，但也应该使用jQuery将此元素添加到DOM中

$.each(products, function(i, product) {
    // Create DOM element
    var _ = $('<div class="col-md-4" id="prod-block">'
        + '<p id="prod-description">' + product.name + ' ' + product.description + '</p>'
        + '<h2 id="price">$' + product.price  + '</h2>'
        + '</div>');
    // Set product data
    _.data("product", product);
    // Add element to the DOM
    $("#output").append(_);
});

$。每个（产品、功能（i、产品）{
//创建DOM元素
变量ux=$（''）
+“
”+product.name+“+product.description+”
”
+“$”+产品价格+”
+ '');
//设置产品数据
_.数据（“产品”，产品）；
//将元素添加到DOM中
$（“#输出”）。追加（#）；
});

这里有些东西应该会有所帮助

我更新了您的列表以包含id属性，并使用该属性将

data

属性分配给正在创建的

div

。悬停时，它会查找

数据产品ID

，并将其显示在

附加

部分

var产品=[{
id:0，
名称：“纸张”，
价格：2.00，
描述：“白色校规纸，100张”，
地点：“5号通道”
}, {
id:1，
名称：“笔”，
价格:5.00,，
说明：“10包黑色墨水圆珠笔”，
地点：“2号通道”
}, {
id:2，
名称：“回形针”，
价格:0.50,，
说明：“银色回形针，100支”，
地点：“6号通道”
}],
信息=“”；
功能打印（消息）{
var outputDiv=document.getElementById（'output'）；
outputDiv.innerHTML=消息；
}
对于（变量i=0；i'；
message+='$'+product.price+''；
消息+=''
}
打印（信息）；
$（'.col-md-4'）。悬停（函数（）{
$（'#additional'）.html（$（this.data（'prodid'））；
});

阿尔索

---

您发布的javascript在products变量中有一个错误，消息从未声明过。

这里有多个选项，例如添加数据作为元素的属性，但我相信您最好的选择是显式创建HTML元素，以便您可以将事件侦听器附加到它们，然后将它们附加到DOM；这将代替将output div元素的innerHTML设置为所需HTML的字符串表示形式

var output=document.getElementById（“输出”）；
var hoverOutput=document.getElementById（“hovertext”）；
对于（变量i=0，len=products.length；i$'+product.price+'；
（功能（）{
var num=i；
var目标=输出；
newDiv.onmouseover=函数（）{
target.innerHTML=num；
};
})();
output.appendChild（newDiv）；
}

查看下面的工作示例：

var产品=[{
名称：“纸张”，
价格：2.00，
描述：“胡说八道”，
地点：“5号通道”
}, {
名称：“回形针”，
价格：0.5，
描述：“废话废话”，
地点：“6号通道”
}];
var output=document.getElementById（“输出”）；
var hoverOutput=document.getElementById（“hovertext”）；
对于（变量i=0，len=products.length；i$'+product.price+'；
（功能（）{
var num=i；
var目标=输出；
newDiv.onmouseover=函数（）{
target.innerHTML=num；
};
})();
output.appendChild（newDiv）；
}

#悬停文本{
字体大小：粗体；
颜色：红色；
最小高度：10px；
}
#输出部{
边框：1px纯黑；
}
.col-md-4{线高：.2em；}

将鼠标悬停在某个项目上可在此处查看其索引

FYI，ID在文档上下文中必须是唯一的，您正在呈现无效的HTML标记良好的点！我会把它们换成班级。谢谢非常感谢你！这是天才。是的，我做了一些示例代码，试图使解释更容易，但我一定是弄错了。我想这对我正在做的事情绝对有效！

$.each(products, function(i, product) {
    // Create DOM element
    var _ = $('<div class="col-md-4" id="prod-block">'
        + '<p id="prod-description">' + product.name + ' ' + product.description + '</p>'
        + '<h2 id="price">$' + product.price  + '</h2>'
        + '</div>');
    // Set product data
    _.data("product", product);
    // Add element to the DOM
    $("#output").append(_);
});