JavaScriptを使って反復的にクラスを追加します

Question

私は16x16のグリッドをJavaScriptで作成しています。また、マウスが各四角の上にマウスを置いたときにグリッドに何かをさせたい。問題は、すべてのdivが同じクラスを取得する反復的な方法でクラスを追加する方法がわかりません。

そうすることで、jQueryはそのクラスに適用された1つの関数でアクションを実行します。

これは、これが選択されますあなたは、クラス

を使用してattribute starts withセレクタ

$('[id^=numero').hover(

を使用するか、または要素にクラスを提供し、要素をターゲットにすることができ、私の現在のコード

var contador = 1; 
var outra = document.createElement('div'); 
outra.id = 'container'; 
document.body.appendChild(outra); 

for (i=1;i<=16;i++){ 
    for (j=1;j<=16;j++){ 
    var divCreation = document.createElement('div'); 
    var created = divCreation; 
    created.id = "numero"+ contador; 
    console.log(created.id); 
    created.textContent = ". "; 
    contador = contador + 1; 
    outra.appendChild(created); 
    } 
} 

$('#numero'+contador).hover(function(){ 
    $(this).css('background-color','yellow'); 
}); 

Answer 1

あなたが動的に作成された要素に特定のclassを与えたい場合は、classNameプロパティを使用してそれを行うことができます。

あなたのコードは次のようになります：

divCreation.className = "someClass"; 

注：新しい変数にdivCreationを設定している理由

• 私は見ていない、それだけで役に立たない です。
• 代わりにをjQueryで検出する代わりに、以下のコードを使用してコードを実行するか、jqueryをそのまま使用したい場合は$('.box').hover(...)のようなクラスセレクタを使用できます。

デモ：

var outra = document.createElement('div'); 
 
outra.id = 'container'; 
 
var contador = 1; 
 
document.body.appendChild(outra); 
 

 
for (i = 1; i <= 16; i++) { 
 
    for (j = 1; j <= 16; j++) { 
 
    var created = document.createElement('div'); 
 
    created.className = "box"; 
 
    created.id = "numero" + contador; 
 
    created.textContent = ". "; 
 
    contador++; 
 
    outra.appendChild(created); 
 
    } 
 
}

.box:hover { 
 
    background-color: yellow; 
 
}

Answer 2

ですidが指定した値で始まるすべての要素を入力し、hoverイベントを添付します。

jQueryを使用している場合、なぜバニラJSとjQueryを混在させたいのですか？あなたは1つだけにこだわることができます。

var contador = 1; 
 
var $outra = $('<div/>', { 
 
    id: 'container', 
 
    class: 'container' 
 
}); 
 

 
$('body').append($outra); 
 

 
for (i=1;i<=16;i++){ 
 
    for (j=1;j<=16;j++) { 
 
    var $divCreation = $('<div/>', { 
 
    \t id: 'numero' + contador, 
 
     text: '. ', 
 
     class: 'box' 
 
    }); 
 
    
 
    $outra.append($divCreation); 
 
    contador = contador + 1; 
 
    } 
 
} 
 

 
$('[id^=numero').hover(function(){ 
 
    $(this).css('background-color','yellow'); 
 
});

.container { 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 1px solid green; 
 
} 
 

 
.box { 
 
    width: 20px; 
 
    height: 20px; 
 
    border: 1px solid black; 
 
    background: green; 
 
    float: left; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

すべてで、このためのIDを使用するための必要性無し...ちょうど一般的なクラスを使用します。また、jQueryを使用することで、これを使用してコードを大幅に少なくしてすべてを作成できます。あなただけ= "何でも" `` created.classNameと作成中にそれを追加しないのはなぜ

var $outra = $('<div>', { id: 'container'}); 
 

 
for (i = 1; i <= 16; i++) { 
 
    for (j = 1; j <= 16; j++) { 
 
    $outra.append($('<div>', { class: 'box', text: '.'})); 
 
    } 
 
} 
 
$('body').append($outra); 
 

 
$('.box').hover(function() { 
 
    $(this).toggleClass('yellow'); 
 
});

.box { 
 
    width: 50px; 
 
    height: 50px; 
 
    display: inline-block; 
 
    border: 1px solid #ccc 
 
} 
 

 
.box.yellow { 
 
    background-color: yellow 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>