Question

我试图解决javascript教科书给出的任务。只要鼠标超过五个div中的一个，代码就会触发事件。无论何时触发事件，它都应该计数（当然还要显示计数器在HTML中的变化）。但它显然无法完成这项工作而我无能为力。

希望你能提供帮助。

HTML

<div id="one"><a id="pick-one">0</a></div>
<div id="two"><a id="pick-two">0</a></div>
<div id="three"><a id="pick-three">0</a></div>
<div id="four"><a id="pick-four">0</a></div>
<div id="five"><a id="pick-five">0</a></div>

JS

var counter = 0;

function count(event){
counter++; event.target.parentElement.innerHTML = counter;
}

function setup(){
var pages = ["one", "two", "three", "four", "five"];
for (var i = 0; i < pages.length; i++){
    document.getElementById("pick-" +
pages[i]).addEventListener("mouseover", count);
}

window.addEventListener("load", setup);

}

Answer 1

删除第window.addEventListener("load", setup);行并写入

setup();

作为脚本的最后一行（并记得链接<body>底部的脚本文件）

<强>更新

您的评论：

实际上代码应该计算到任何数字，而不是只有一到五个

更改

event.target.parentElement.innerHTML = counter;

到

event.target.innerHTML = counter;

此处正在运作EXAMPLE

Answer 2

如Dean的评论所述，你应该将load事件放在循环之外。 缺少的另一部分是括号：

window.addEventListener("load", setup());

编辑2 实际上这是错误的，它与括号一起使用的原因是它执行函数然后将返回分配给onLoad事件。这不是理想的行为。 onLoad事件不会在小提琴中触发的原因是：

Edited working fiddle

希望它有所帮助。

修改

我看到了你的评论，之所以没有继续宣传是因为你正在改变父母innerHTML，而不是<a>的innerHTML，试试这个：

counter++; event.target.innerHTML = counter;

Answer 3

首先，您需要从设置功能移动函数调用。

其次，它计为5，因为你用计数器替换整个链接，而不仅仅是它的值。

要解决此问题，您可以尝试以下方法：

var counters = {
	one: 0,
  two: 0,
  three: 0,
  four: 0,
  five: 0
}

function count(event){
  var id = event.target.id;
  var parentId = event.target.parentElement.id;
  counters[parentId] = counters[parentId] + 1;
  
  document.getElementById(id).innerHTML = counters[parentId];
}

function setup(){
  var pages = ["one", "two", "three", "four", "five"];
  for (var i = 0; i < pages.length; i++){
      document.getElementById("pick-" + pages[i]).addEventListener("mouseover", count);
  }
}

document.addEventListener('DOMContentLoaded', setup(), false);

<div id="one"><a id="pick-one">0</a></div>
<div id="two"><a id="pick-two">0</a></div>
<div id="three"><a id="pick-three">0</a></div>
<div id="four"><a id="pick-four">0</a></div>
<div id="five"><a id="pick-five">0</a></div>

因此，在count函数中，首先获取带有var id = event.target.id;的元素的id，然后传递，然后添加计数器。

或者您也可以将event.target.parentElement.innerHTML = counter;更改为event.target.innerHTML = counter;

Here is the fiddle.

<强>更新

Here is the updated fiddle

Answer 4

<div id="one"><a id="pick-one">0</a></div>
<div id="two"><a id="pick-two">0</a></div>
<div id="three"><a id="pick-three">0</a></div>
<div id="four"><a id="pick-four">0</a></div>
<div id="five"><a id="pick-five">0</a></div>

var counter = 0;
window.onLoad =  setup();

function count(event){
counter++; event.target.parentElement.innerHTML = counter;
}

function setup(){
var pages = ["one", "two", "three", "four", "five"];
for (var i = 0; i < pages.length; i++){
    document.getElementById("pick-" +
pages[i]).addEventListener("mouseover", count);
}

}

Answer 5

您可以注册多个event.target的父级，并使用一个eventListener()监听所有关闭的事件。在本演示中，我们将mouseover事件注册到document。然后，我们使用event.target来确定悬停的确切元素，然后仅接受if/else条件下我们真正想要的内容。有关仅为一个eventListener()使用无限量元素的详细信息，请阅读 Event Delegation 上的这篇文章。

演示

在演示中评论的详细信息

＆＃13;

// Register the mouseover event on document
document.addEventListener("mouseover", function(e) {

  // Declare counter outside of callback function
  var counter = 0;

  // Pass Event Object and counter 
  count(e, counter);
});



function count(e, counter) {

  // increment counter
  counter++;

  // if the event origin element (e.target) is a <a> element...
  if (e.target.tagName === "A") {

    // Convert its text into a real number
    var num = parseInt(e.target.textContent, 10);

    // Then add the counter to e.target's content
    e.target.textContent = counter + num;

    // Otherwise...
  } else {

    // Quit
    return false;
  }
  // Return e.target's content (not used in this demo)
  return e.target.textContent;
}

＆＃13;

a {
  cursor: pointer;
  font-size: 32px;
}

div {
  margin: 5px 10px;
}

＆＃13;

<div id="one">
  <a id="pick-one">0</a>
</div>
<div id="two">
  <a id="pick-two">0</a>
</div>
<div id="three">
  <a id="pick-three">0</a>
</div>
<div id="four">
  <a id="pick-four">0</a>
</div>
<div id="five">
  <a id="pick-five">0</a>
</div>

＆＃13;

Javascript，定位父元素：为什么不触发事件？

5 个答案:

演示