时间戳

首页 > 解决方案 > 为数组中的所有元素切换元素 onclick 的颜色

javascript - 为数组中的所有元素切换元素 onclick 的颜色

问题描述

我在 Javascript 数组中有一组 HTML 元素。我想为所有这些添加一个 onclick。单击时，元素将在 no class 和 class live之间切换。

const size={
    x:10,
    y:10
};
var matrix=[];
for(var i=[0, 0], rows=[]; i[0]<size.y; i[0]++){
    rows.push(document.createElement("tr"));
    document.querySelector("tbody").appendChild(rows[i[0]]);
    matrix.push([]);
    for(i[1]=0; i[1]<size.x; i[1]++){
        matrix[i[0]][i[1]]=document.createElement("td");
        rows[i[0]].appendChild(matrix[i[0]][i[1]]);
    }
}//this bit works↑
for(var i=[0,0]; i[0]<matrix.length; i[0]++){
    for(i[1]=0; i[1]<matrix[0].length; i[1]++){
        matrix[i[0]][i[1]].onclick=function(){
            if($(this).hasClass("live")){
                $(this).removeClass("live");
            }else{
                $(this).addClass("live");
            }
        }
    }
}
table{
    border-collapse:collapse;
                background-color:black;
}
td{
    width:47.5px;
    height:47.5px;
    padding:0px;
    border:2.5px solid gray;
}
td.live{
    background-color:white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
   <tbody>
      
   </tbody
</table>

标签： javascripthtml

解决方案

您可以使用Element.classList的.toggle( String [, force] )：

const size={
    x:10,
    y:10
};
var matrix=[];
for(var i=[0, 0], rows=[]; i[0]<size.y; i[0]++){
    rows.push(document.createElement("tr"));
    document.querySelector("tbody").appendChild(rows[i[0]]);
    matrix.push([]);
    for(i[1]=0; i[1]<size.x; i[1]++){
        matrix[i[0]][i[1]]=document.createElement("td");
        rows[i[0]].appendChild(matrix[i[0]][i[1]]);
    }
}//this bit works↑
for(var i=[0,0]; i[0]<matrix.length; i[0]++){
    for(i[1]=0; i[1]<matrix[0].length; i[1]++){
        matrix[i[0]][i[1]].onclick=function(e){
            this.classList.toggle('live');
        }
    }
}
table{
    border-collapse:collapse;
    background-color:black;
}
td{
    width:47.5px;
    height:47.5px;
    padding:0px;
    border:2.5px solid gray;
}
td.live{
    background-color:white;
}
<table>
    <tbody>

    </tbody>
</table>

推荐阅读