Блог

Главная - Вопросы по программированию - Переключение цвета элемента onclick для всех элементов в массиве

Переключение цвета элемента onclick для всех элементов в массиве

#javascript #html

#javascript #HTML

Вопрос:

У меня есть массив HTML-элементов в массиве Javascript. Я хотел бы добавить onclick ко всем из них. При нажатии элемент переключался между классом no и классом 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>

Комментарии:

1. Я преобразовал ваш код во фрагмент, и это работает — ваш вопрос в том, что вы хотите сделать это только на javascript, а не на jQuery?

Ответ №1:

Вы можете использовать .toggle( String [, force] ) из Element.classList:

 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>

Ответ №2:

Другой подход заключается в добавлении функции внутри создания ячейки:

 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");
        matrix[i[0]][i[1]].setAttribute('onclick','this.classList.toggle("live");'); // add onclick to the created td
        rows[i[0]].appendChild(matrix[i[0]][i[1]]);
    }
}

Обратите внимание, что вам не нужно jQuery просто переключаться между классами (:

Фрагмент:

 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");
        matrix[i[0]][i[1]].setAttribute('onclick','this.classList.toggle("live");'); // add onclick to the created td
        rows[i[0]].appendChild(matrix[i[0]][i[1]]);
    }
}//this bit works↑ - you don't need the bottom script...

/*
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;
}  
 <table><tbody></tbody></table>