需要索引项目数在数组上悬停
Need index number of item in array on hover
我对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循环这个数组,并将结果打印到DIV中id为"output"的页面。
function print(message) {
var outputDiv = document.getElementById('output');
outputDiv.innerHTML = message;
}
for (var i = 0; i < products.length; i += 1) {
product = products[i];
message += '<div class="col-md-4" id="prod-block">';
message += '<p id="prod-description">' + product.name + ' ' + product.description + '</p>';
message += '<h2 id="price">$' + product.price + '</h2>';
message += '</div>'
}
print(message);
所有这些都很好。我的产品在纸上。现在,我想要的是,当鼠标悬停在任何项div上时,在单独的div中显示附加信息(例如位置)。我的问题是-你如何确定项目的索引号,正在悬停?到目前为止,索引号只存在于我的for循环中,我不知道如何在不同的函数中访问它。
同样,我的知识有限,所以我不确定在for循环中编写HTML是否是最好的方法。我真的很感谢任何建议或批评!!这里有些东西应该会有帮助。
我更新了您的列表以包含id属性,并使用该属性将data
属性分配给正在创建的div
。悬停时,它寻找data-prodid
并在additional
部分显示。
你发布的javascript在你的产品变量中有一个错误,消息从未被声明。
标题>尝试添加一个提示工具,当您创建您想要的索引号的div。
<div title="The index number">
你的代码确实有问题:滥用id
。许多元素的id都是prod-block
、prod-description
,但id
必须是唯一的。
这样做,您可以通过检查id轻松地检测到哪个元素处于悬停状态。有多种技术可以做到这一点,如果你想学习jQuery,这真的很容易开始。
如果您使用jQuery,您可以使用data()来定义DOM元素的data属性,但是您还应该使用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(_);
});
这里有多种选择,例如将数据添加为元素的属性,但我认为最好的选择是显式创建HTML元素,以便您可以将事件侦听器附加到它们,然后将它们附加到DOM;这将取代将输出div元素的innerHTML设置为所需HTML的字符串表示形式。
var output = document.getElementById("output");
var hoverOutput = document.getElementById("hovertext");
for (var i = 0, len = products.length; i < len; i++) {
product = products[i];
var newDiv = document.createElement("div");
newDiv.className = "col-md-4";
newDiv.innerHTML = '<p class="prod-description">' + product.name + ' ' + product.description + '</p><h4 class="price">$' + product.price + '</h4>';
(function() {
var num = i;
var target = hoverOutput;
newDiv.onmouseover = function() {
target.innerHTML = num;
};
})();
output.appendChild(newDiv);
}
查看下面的工作示例:
var products = [{
name: "paper",
price: 2.00,
description: "blah blah",
location: "aisle 5"
}, {
name: "paper clips",
price: 0.5,
description: "blah bloo blab",
location: "aisle 6"
}];
var output = document.getElementById("output");
var hoverOutput = document.getElementById("hovertext");
for (var i = 0, len = products.length; i < len; i++) {
product = products[i];
var newDiv = document.createElement("div");
newDiv.className = "col-md-4";
newDiv.innerHTML = '<p class="prod-description">' + product.name + ' ' + product.description + '</p><h4 class="price">$' + product.price + '</h4>';
(function() {
var num = i;
var target = hoverOutput;
newDiv.onmouseover = function() {
target.innerHTML = num;
};
})();
output.appendChild(newDiv);
}
#hovertext {
font-weight: bold;
color: red;
min-height: 10px;
}
#output div {
border: 1px solid black;
}
.col-md-4{line-height:.2em;}
<div id="output"></div>
<div id="hovertext">Hover over an item to see its index here</div>
- 如何在映射数组中添加换行符
- javascript结合了数组和字典
- 需要帮助设置json数组
- 不能从angular2中的子组件指定父组件中的数组
- 使用JS将数组转换为json对象
- 数组在递归方法中设置为null
- knockoutjs可观察数组
- Javascript-如何读取json文件中的列并将其保存在Javascript数组中
- 将数组从PHP传递到Javascript
- JavaScript数组排序(函数)用于对表行进行排序,而不是排序
- JavaScript/jQuery悬停函数的行为很有趣——数组问题
- 数组中的工具提示/悬停文本
- Javascript.使用鼠标悬停事件更改数组中 td 元素的背景颜色
- Raphaeljs悬停在关联数组的每个元素上
- O(1)检查鼠标是否悬停在圆数组中的一个
- 使用javascript鼠标悬停数组时出错
- 将鼠标悬停事件绑定到数组中的多个元素
- 如何创建一个在鼠标悬停时循环浏览图像数组的 JavaScript
- 需要索引项目数在数组上悬停
- 在动态的悬停状态数组中写入鼠标离开状态