Question

我的计划
最初以黑色绘制网格的Etch-A-Sketch。用户点击删除以在黑色方块上着色。用户也可以点击** Rainbow“在每个方块上绘制一个随机颜色，即square [0]可以是蓝色，square [1]可以是紫色......等等，它们在每个 mouseover上随机化< / em>的

问题您会注意到 eraseGrid（）和 drawRainbow（）的代码几乎完全相同。我必须这样做，否则程序将无法正常工作。这是 Rainbow 在每个鼠标悬停上绘制不同颜色的唯一方法。

目标如果你看一下我在底部注释掉的功能，我尝试了一些我可以用于 eraseGrid（）和 drawRainbow（）的功能，但在测试时功能，它没有按预期工作。它不是在每个鼠标悬停上绘制随机颜色，而是在网格上创建一个随机颜色（比方说是蓝色）并绘制蓝色。如果我重新打开彩虹，它会创建另一种随机颜色（例如绿色）并在网格上绘制。
我不明白为什么我创建的函数不能按预期工作，而重复的代码却没有。

/**************************** Input->Button DOM ****************************/ const newGrid = document.getElementById('new-grid'); newGrid.addEventListener('click', createGrid); const erase = document.getElementById('erase'); erase.addEventListener('click', eraseGrid); const rainbow = document.getElementById('rainbow'); rainbow.addEventListener('click', drawRainbow); /*********************** Grid variable and creation ***********************/ const main = document.querySelector('main'); const div = main.getElementsByTagName('div'); drawGrid(16, ((600 / 16) - 2) + 'px'); pickColor('#333'); function createGrid() { // removes divs from largest to smallest for (let i = main.childNodes.length - 1; i >= 0 ; i--) { main.removeChild(main.childNodes[i]); } let size; do { size = parseInt(prompt("Please enter a number from 1 to 64", ""), 10); } while(Number.isNaN(size) || size > 64 || size < 1); const numPx = (600 / size) - 2; let px = numPx + 'px'; drawGrid(size, px); pickColor('#333'); } function pickColor(color) { for (let i = 0; i < main.childNodes.length; i++) { main.childNodes[i].addEventListener('mouseover', function change() { main.childNodes[i].style.backgroundColor = color; }) } } // draw grid of div elements function drawGrid(size, px) { for (let i = 0; i < size; i++) { for (let j = 0; j < size; j++) { const div = document.createElement('div'); main.appendChild(div); div.setAttribute('style', `width: ${px}; height: ${px}; float: left; border: 1px solid #333;`); } } // clear floats const div = document.createElement('div'); div.setAttribute('class', 'clear'); main.appendChild(div); } function eraseGrid() { erase.classList.toggle('erase'); if (erase.className === 'erase') { rainbow.classList.remove('rainbow'); main.addEventListener('mouseover', function(){ pickColor('#f2f2f2'); }) } else { main.addEventListener('mouseover', function(){ pickColor('#333'); }) } } function randColor() { let arr = []; for (let i = 0; i < 3; i++) { arr.push(Math.floor(Math.random() * 255)); } return arr; } function drawRainbow() { rainbow.classList.toggle('rainbow'); if (rainbow.className === 'rainbow') { erase.classList.remove('erase'); main.addEventListener('mouseover', function(){ pickColor('rgb(' + randColor() + ')'); }) } else { main.addEventListener('mouseover', function(){ pickColor('#333'); }) } // changeColor(rainbow, 'rainbow', erase, 'erase', 'rgb(' + randColor() + ')') } /*function changeColor(newClass, newClassStr, oldClass, oldClassStr, color) { newClass.classList.toggle(newClassStr); if (newClass.className === newClassStr) { oldClass.classList.remove(oldClassStr); main.addEventListener('mouseover', function(){ pickColor(color); }) } else { main.addEventListener('mouseover', function(){ pickColor('#333'); }) } }*/

Answer 1

你可以找出这些名字，但看起来你只是在做

function go(str1, str2){
    document.getElementById(str1).classList.toggle(str1);
    if (document.getElementById(str1).className === str1) {
        document.getElementById(str2).classList.remove(str2);
        main.addEventListener('mouseover', function(){
            pickColor('#f2f2f2');
        })
    }
    else {
        main.addEventListener('mouseover', function(){
            pickColor('#333');
        })
    }
}

只需使用go('erase', 'rainbow')或go('rainbow', 'erase')

进行调用即可

function eraseGrid(){
    go('erase', 'rainbow');
}

function drawRainbow(){
    go('rainbow', 'erase');
}

Answer 2

对于注释掉的changeColor函数，你应该能够像这样重构它，如果你把彩虹和擦除放在父对象中，这样你就可以按名称找到它们。

const objects = {erase, rainbox};

function changeColor(str1, str2) { 
    objects[str1].classList.toggle(str1);
    if (objects[str1].className === str1) {
        objecs[str2].classList.remove(str2);
        main.addEventListener('mouseover', function(){
            pickColor('rgb(' + randColor() + ')');
        })
    }
    else {
        main.addEventListener('mouseover', function(){
            pickColor('#333');
        })
    }
}

再次，正如@me_在评论中提到的那样。每次单击添加eventListener很可能不是您想要的。在第五次点击之后，你将有五个eventListeners和五个函数function(){pickColor('rgb(' + randColor() + ')');}，每次你鼠标悬停在“main”上时都会被调用（每次点击都会扩展...）

（编辑因为评论非常严格：）

00Saad：我看到有一个removeEventListener（）方法，我会通过添加main.removeEventListener（'mouseover'，function（）{pickColor（'rgb（'+ randColor（）+'）'）;}来实现它在addEventListener之后？

不，如果您希望以后能够轻松删除它，请将该函数存储在变量中。

function(){...}＆lt; - 这是创建新功能的代码段。所以这个：main.removeEventListener('mouseover', function(){...})，会创建一个新的匿名函数，并尝试从main的事件监听器（它不存在）中删除。

此外，如果您使用存储的函数（const a = function(){..}）和更晚的addEventListener('mouseover', a)） kinda 解决问题，因为您无法将相同的函数绑定到同一事件无论如何多次（它将没有效果）。

但接下来的addEventListener - 调用没有任何区别，因此在您的情况下，将鼠标悬停监听器置于changeColor()范围之外会更有意义。

let isRandomColor = true;
main.addEventListener('mouseover', function(){
  pickColor( isRandomColor ? randomColor() : '#333' );
});

function changeColor(){
  if (...){
    isRandomColor = true;
  } else {
    isRandomColor = false;
  }
}

JS：什么函数会让我的代码干掉？

2 个答案: