悬停时需要数组中项目的索引号
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 遍历此数组并将结果打印到 ID 为 "output" 的 DIV 中的页面。
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 是否是最好的方法。我非常感谢任何建议或批评!!
尝试添加提示工具,当您使用所需的索引号创建 div 时。
<div title="The index number">
您的代码确实有问题:滥用 id
。许多元素将具有 ID prod-block
、prod-description
,但具有 id
has to be unique。
这样做,您只需检查 id 即可轻松检测到悬停在哪个元素上。有多种技术可以做到这一点,如果你想学习 jQuery 这真的很容易开始 this way。
如果你使用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(_);
});
有些东西应该对您有所帮助。
我更新了您的列表以包含一个 id 属性,并使用它为正在创建的 div
分配了一个 data
属性。悬停时它会查找 data-prodid
并将其显示在 additional
部分。
Fiddle
var products = [{
id: 0,
name: "paper",
price: 2.00,
description: "White College-ruled Paper, 100 sheets",
location: "Aisle 5"
}, {
id: 1,
name: "pens",
price: 5.00,
description: "10 Pack, Black Ink Ball Point Pens",
location: "Aisle 2"
}, {
id: 2,
name: "paper clips",
price: 0.50,
description: "Silver Paper Clips, 100 count",
location: "Aisle 6"
}],
message = '';
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 data-prodid="' + product.id + '" 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);
$('.col-md-4').hover(function() {
$('#additional').html($(this).data('prodid'));
});
还有
您发布的 javascript 在您的产品变量中存在错误,并且消息从未声明过。
这里有多个选项,例如将数据添加为元素的属性,但我相信您最好的选择是显式创建 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 的新手,我正在做一个应该很简单的项目。虽然我被卡住了,但我很乐意就如何获得解决方案提出一些意见。 我有一个简短的产品数组,如:
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 中的页面。
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 是否是最好的方法。我非常感谢任何建议或批评!!
尝试添加提示工具,当您使用所需的索引号创建 div 时。
<div title="The index number">
您的代码确实有问题:滥用 id
。许多元素将具有 ID prod-block
、prod-description
,但具有 id
has to be unique。
这样做,您只需检查 id 即可轻松检测到悬停在哪个元素上。有多种技术可以做到这一点,如果你想学习 jQuery 这真的很容易开始 this way。
如果你使用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(_);
});
有些东西应该对您有所帮助。
我更新了您的列表以包含一个 id 属性,并使用它为正在创建的 div
分配了一个 data
属性。悬停时它会查找 data-prodid
并将其显示在 additional
部分。
Fiddle
var products = [{
id: 0,
name: "paper",
price: 2.00,
description: "White College-ruled Paper, 100 sheets",
location: "Aisle 5"
}, {
id: 1,
name: "pens",
price: 5.00,
description: "10 Pack, Black Ink Ball Point Pens",
location: "Aisle 2"
}, {
id: 2,
name: "paper clips",
price: 0.50,
description: "Silver Paper Clips, 100 count",
location: "Aisle 6"
}],
message = '';
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 data-prodid="' + product.id + '" 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);
$('.col-md-4').hover(function() {
$('#additional').html($(this).data('prodid'));
});
还有
您发布的 javascript 在您的产品变量中存在错误,并且消息从未声明过。
这里有多个选项,例如将数据添加为元素的属性,但我相信您最好的选择是显式创建 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>