Question

我一直在编写一个游戏，我想在这里提到的部分是 - 有一种形式，人们选择他们正在玩的棋盘的大小，我已成功完成它，它产生了一半金字塔。

我的主要问题是，为了玩，我需要将鼠标移到元素上，它会改变颜色，然后通过单击将其删除。无论我做什么，我似乎无法在我选择的元素上做到这一点，我可以让它发生在那里最接近的元素，但从来没有在我点击的元素上。

这是我到目前为止所做的，

function selectTab() { 
    document.getElementById("tabuleiro").innerHTML = "";
    var tamanho = document.getElementById("valorint").value;
    if(tamanho<=10) {
        console.log(tamanho);
        var tab = document.getElementById("tabuleiro");
        for(var i = 0; i<tamanho; i++) {
            var linha = document.createElement('div');
            for(var j = 0; j<i+1; j++) {
                var coluna = document.createElement('div');
                coluna.setAttribute("id", "coluna");
                linha.appendChild(coluna);
                coluna.addEventListener("click", function() {
                    playMove(this.id) }, false);
            }
            tab.appendChild(linha);
        }
    }
    else {
        console.log(tamanho);
        alert("Isso é demasiado!");
    }
}

function playMove(id) {
    this.closest("div").remove();
}

我不能使用jQuery，我只有一个用HTML定义板的div，而不是它的组件。

Answer 1

在side for for循环中添加侦听器时，这通常是一个闭包问题。试试：

function selectTab() { 
    document.getElementById("tabuleiro").innerHTML = "";
    var tamanho = document.getElementById("valorint").value;
    if(tamanho<=10) {
        console.log(tamanho);
        var tab = document.getElementById("tabuleiro");
        for(var i = 0; i<tamanho; i++) {
            var linha = document.createElement('div');
            for(var j = 0; j<i+1; j++) {
                var coluna = document.createElement('div');
                coluna.setAttribute("id", "coluna");

                (function(element){
                    element.addEventListener("click", function() {
                    playMove(this.id) }, false);
                )}(coluna);

                coluna.appendChild(coluna);
            }
            tab.appendChild(linha);
        }
    }
    else {
        console.log(tamanho);
        alert("Isso é demasiado!");
    }
}

function playMove(id) {
    this.closest("div").remove();
}

更新答案：

问题是1）this.closest（＆＃34; div＆＃34;）不是元素，2）你在将节点附加到dom后添加了监听器。

＆＃13;

function selectTab() { 
    document.getElementById("tabuleiro").innerHTML = "";
    var tamanho = document.getElementById("valorint").value;
    if(tamanho<=10) {
        console.log(tamanho);
        var tab = document.getElementById("tabuleiro");
        for(var i = 0; i<tamanho; i++) {
            var linha = document.createElement('div');
            linha.setAttribute("class", "linha");
            for(var j = 0; j<i+1; j++) {
                var coluna = document.createElement('div');
                coluna.setAttribute("class", "coluna");
                
                coluna.addEventListener("click", function() {
                    this.remove() }, false);
                    
                 linha.appendChild(coluna);
            }
            tab.appendChild(linha);
        }
    }
    else {
        console.log(tamanho);
        alert("Isso é demasiado!");
    }
}

＆＃13;

#tabuleiro {
  border: 1px red solid;
}
.coluna {
  height: 25px;
  width: 25px;
  border: 1px blue solid;
}

.linha {
    display: inline-block;
}

＆＃13;

<div id="tabuleiro">

</div>

<input id="valorint" type="text" value="3">

<button type="button" onclick="selectTab()">Click Me!</button>

＆＃13;

从函数javascript中删除一个元素

1 个答案: