CSS/HTMLのdivグリッドがjavascriptの2D配列に対応する

Question

私は現在、Javascriptの2D配列に対応するHTMLのdivのグリッドを作成しようとしている私的なプロジェクトを行っていますが、これを行うための最善の方法ではありません。

グリッド内のdivをクリックするたびに、色が変わり、配列内の数値が0から1に変更される（またはその逆）場合があります。それ以外の数字もありますが、それがその基本的な形です。

私は、色を扱う最良の方法であるdivのクラスを変更するために、ある種のonClickリスナーを使用していると仮定していますが、グリッドに配列をリンクするにはどうすればよいですか？

お手数をおかけしていただきありがとうございます。

Answer 1

あなたは、配列

var data =[ 
 
    {color:'yellow', num:0}, 
 
    {color:'orange', num:0} 
 
]; 
 

 
$(function(){ 
 
    var $divs = $('.some-class').click(function(){ 
 
    var divIndex = $divs.index(this); 
 
    $(this).css('backgroundColor', data[divIndex].color); 
 
    data[divIndex].num ++; 
 
    console.log(data); 
 
    }); 
 
    
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="some-class">Click me - item #1</div> 
 
<div class="some-class">Click me - item #2</div>