【问题标题】：Need index number of item in array on hover悬停时需要数组中项目的索引号
【发布时间】：2015-08-09 20:14:30
【问题描述】：

我对 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 为“输出”的 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 是否是最好的方法。我非常感谢任何建议或批评！

【问题讨论】：

仅供参考，ID 在文档上下文中必须是唯一的，您正在呈现无效的 HTML 标记
好点！我会将它们更改为类。谢谢！

标签： javascript jquery html arrays jquery-hover

【解决方案1】：

这里有多种选择，例如将数据添加为元素的属性，但我相信您最好的选择是显式创建 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>

【讨论】：

【解决方案2】：

如果你使用 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(_);
});

【讨论】：

【解决方案3】：

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

我更新了您的列表以包含一个 id 属性，并使用该属性将data 属性分配给正在创建的div。在悬停时，它会查找 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 变量中存在错误，并且从未声明过消息。

【讨论】：

非常感谢！这是天才。是的，我制作了一些示例代码以试图使其更容易解释，但我一定犯了一个错误。我认为这绝对适用于我正在尝试做的事情！

【解决方案4】：

您的代码确实有问题：滥用id。许多元素的 id 为prod-block、prod-description，但为idhas to be unique。

这样做，您只需检查 id 即可轻松检测悬停的元素。有多种技术可以做到这一点，如果你想学习 jQuery，这真的很容易上手this way。

【讨论】：

【解决方案5】：

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

<div title="The index number">

【讨论】：