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

Question

我是 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 是否是最好的方法。我非常感谢任何建议或批评!!

Answer 1

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

我更新了您的列表以包含一个 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 在您的 products 变量中存在错误，并且 message 从未声明过。