堆栈内存溢出
  简体   繁体   English

如何做到这一点，以便for循环中的事件侦听器每次单击将一项推入数组

[英]how to make it so event listener within for loop pushes one item per click to array

 原文  2019-04-27 19:57:44  4   2    javascript/ html/ css

问题描述

I'm trying to create an array of image class names that the user has clicked. 我正在尝试创建用户单击的图像类名称数组。 I'm doing this using a 'for' loop and an event listener. 我正在使用“ for”循环和事件侦听器进行此操作。 When one of the images is clicked, its class name is added to an array and at the end of the program the items in the array are displayed. 单击其中一张图像时，其类名将添加到数组中，并在程序末尾显示数组中的项目。

The problem is that when I check my console log there are multiple events being recorded by the log each time, rather than the single new selection. 问题是，当我检查控制台日志时，日志每次都会记录多个事件，而不是单个新选择。

Why is this happening and how do I get around it? 为什么会发生这种情况，我该如何解决？ 


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <title>JavaScript Discovery Project</title>
    <link rel="stylesheet" href="css/stylesheet.css"/>
  </head>
  <body>
    <div class="wrapper">
        <div id="main-container" class="set-1 set-wrapper">
            <div id="col-1" class="col-1 col">

            </div>
            <div id="col-2" class="col-2 col">
              </div>
            <div id="col-3" class="col-3 col">
              </div>
          </div>
      </div>
      <script src="./js/script.js"></script>
    </body>
    </html>


var wrapperNode = document.querySelector("#main-container");
function imageSwapper(oldClass, newClass) {
    console.log("in imageSwapper");
    wrapperNode.classList.remove(oldClass);
    wrapperNode.classList.add(newClass);
}
var resultsArray = [];
console.log(wrapperNode);
wrapperNode.addEventListener("click", function() {
    console.log("wrapperNode Clicked");

    window.addEventListener("click", function(event) {
        console.log("window listener");
        console.log(event);
        console.log(event.toElement.className);
        resultsArray.push(event.toElement.className);
        console.log(resultsArray);
    });

    if (wrapperNode.classList.contains("set-1")) {
        console.log("set-1 if");

        imageSwapper("set-1", "set-2");
    } else if (wrapperNode.classList.contains("set-2")) {
        console.log("set-2 if");
        imageSwapper("set-2", "set-3");
    } else if (wrapperNode.classList.contains("set-3")) {
        console.log("set-3 if");
        imageSwapper("set-3", "set-4");


.set-1 .col-1 {
  background-color: blue;
}
.set-1 .col-2 {
  background-color: blueviolet;
}
.set-1 .col-3 {
  background-color: red;
}

.set-2 .col-1 {
  background-image: url("../img/stone.jpg");
}
.set-2 .col-2 {
  background-image: url("../img/bread.jpg");
}
.set-2 .col-3 {
  background-image: url("../img/pillow.jpg");
}

.set-3 .col-1 {
  background-image: url("../img/polkaDots.jpg");
}
.set-3 .col-2 {
  background-image: url("../img/wavePattern.jpg");
}
.set-3 .col-3 {
  background-image: url("../img/squares.jpg");
}

.set-4 .col-1 {
  background-image: url("../img/pencilTip.jpg");
}
.set-4 .col-2 {
  background-image: url("../img/blankPage2.jpg");
}
.set-4 .col-3 {
  background-image: url("../img/eraser.jpg");
}

This should log each col that a user selects and store it in an array, but it keeps exponentially increasing with each click. 这应该记录用户选择的每个col并将其存储在数组中，但是每次单击都会以指数方式增长。 The console log below has recorded a total of three clicks. 下面的控制台日志总共记录了3次单击。 I clicked the first col on my first click, the second col on my second and the third col on my third click. 我在第一次单击时单击了第一个列，在第二次单击时单击了第二个列，在第三次单击时单击了第三个列。 

hello
script.js:21 <div id=​"main-container" class=​"set-1 set-wrapper">​…​</div>​
script.js:23 wrapperNode Clicked
script.js:34 set-1 if
script.js:16 in imageSwapper
script.js:26 window listener
script.js:27 MouseEvent {isTrusted: true, screenX: 429, screenY: 486, clientX: 409, clientY: 348, …}
script.js:28 col-1 col
script.js:30 ["col-1 col"]
script.js:23 wrapperNode Clicked
script.js:38 set-2 if
script.js:16 in imageSwapper
script.js:26 window listener
script.js:27 MouseEvent {isTrusted: true, screenX: 879, screenY: 501, clientX: 859, clientY: 363, …}
script.js:28 col-2 col
script.js:30 (2) ["col-1 col", "col-2 col"]
script.js:26 window listener
script.js:27 MouseEvent {isTrusted: true, screenX: 879, screenY: 501, clientX: 859, clientY: 363, …}
script.js:28 col-2 col
script.js:30 (3) ["col-1 col", "col-2 col", "col-2 col"]
script.js:23 wrapperNode Clicked
script.js:41 set-3 if
script.js:16 in imageSwapper
script.js:26 window listener
script.js:27 MouseEvent {isTrusted: true, screenX: 1437, screenY: 477, clientX: 1417, clientY: 339, …}
script.js:28 col-3 col
script.js:30 (4) ["col-1 col", "col-2 col", "col-2 col", "col-3 col"]
script.js:26 window listener
script.js:27 MouseEvent {isTrusted: true, screenX: 1437, screenY: 477, clientX: 1417, clientY: 339, …}
script.js:28 col-3 col
script.js:30 (5) ["col-1 col", "col-2 col", "col-2 col", "col-3 col", "col-3 col"]
script.js:26 window listener
script.js:27 MouseEvent {isTrusted: true, screenX: 1437, screenY: 477, clientX: 1417, clientY: 339, …}
script.js:28 col-3 col
script.js:30 (6) ["col-1 col", "col-2 col", "col-2 col", "col-3 col", "col-3 col", "col-3 col"]

Above, it appears my program is recording everything exponentially. 上面，看来我的程序正在以指数方式记录所有内容。 The readout should be: 读数应为：

script.js:30 (2) ["col-1 col", "col-2 col", "col-3 col"] script.js：30（2）[“ col-1 col”，“ col-2 col”，“ col-3 col”]

instead i'm getting: 相反，我得到：

script.js:30 (6) ["col-1 col", "col-2 col", "col-2 col", "col-3 col", "col-3 col", "col-3 col"] script.js：30（6）[“ col-1 col”，“ col-2 col”，“ col-2 col”，“ col-3 col”，“ col-3 col”，“ col-3 col” ]

2 个解决方案

解决方案1
 1  2019-04-27 20:05:42

In the click event of your wrapperNode you are adding an event listener to the window. 在wrapperNode的click事件中，您正在向窗口添加事件侦听器。 Every time someone clicks the wrapperNode a new event listener is added but never removed. 每当有人单击wrapperNode时，都会添加一个新的事件侦听器，但永远不会删除它。 This would explain the exponentially increasing output. 这将解释成倍增加的产出。 I'm not sure what you are trying to accomplish but I think either you should remove the previous event listener before adding the new, or you should just apply the inner event listener once, and not adding it every time wrapperNode is clicked. 我不确定您要完成什么，但我认为您应该在添加新事件监听器之前先删除先前的事件监听器，或者只应应用一次内部事件监听器，而不是在每次单击wrapperNode时都添加它。

解决方案2
 0  2019-04-27 20:42:23

Using jquery it would look like this 使用jQuery，它看起来像这样

When you create each image, just add the same class to each one. 创建每个图像时，只需向每个图像添加相同的类。 That way you only need one event. 这样，您只需要一个事件。 eg. 例如。 'img'. 'IMG'。 You can even remove the 'img' string before pushing it to the array. 您甚至可以在将'img'字符串推入数组之前将其删除。 

var list = [];

$('.img').click(function(e){
    list.push( this.className.replace('img','') );
    console.log(list.toString());
});

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何遍历一个数组，该数组一次一个地触发数组中每个项目的单击事件 - How to loop through an array that triggers an click event on each item in the array one at a time 点击循环事件监听器 - Event listener on click on loop 如何让循环等待事件监听器？ - How to make a loop wait for an event listener? 如何在JavaScript中的事件监听器中使for循环工作 - how to make a for loop work in an event listener in javascript 如何使用事件侦听器单击功能使用javascript显示和隐藏数组中的图像 - How to use an event listener click function to display and hide images within an array using javascript 循环遍历数组并添加事件侦听器“click”到每个 - Loop through array and add event listener “click” to each 事件监听器class的变化只是暂时的，classList.replace只是一次点击，如何让它永久化 - Change of class on an event listener is only temporary, classList.replace is only for one click, how to make it permanent 制作<li>列出 object VueJs 中的每个数组项</li> - Make <li> list per item of array within an object VueJs 如何遍历所有按钮到单击事件侦听器 - How to loop through all the buttons to a click event listener for 循环中的事件侦听器如何一直运行？ - How does an event listener within a for loop keep running all the time?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM