Question

我用javascript创建一个16x16的网格。当鼠标悬停在每个方格上时，我也希望网格能够做某事。问题是我不知道如何以迭代的方式添加一个类，每个div都获得相同的类。

这样做，我会让jQuery使用一个应用于该类的函数来执行操作。

这是我现在的代码

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检测hover，你可以用css来做，看看下面的Demo，或者如果你想保持jquery，你可以使用像$('.box').hover(...)这样的类选择器。

<强>演示：

＆＃13;
＆＃13;
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); } }
＆＃13;
.box:hover { background-color: yellow; }
＆＃13;
＆＃13;
＆＃13;

Answer 2

您可以使用attribute starts with选择器

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

或为元素提供一个类，并使用类

来定位元素

这将选择id以您指定的值开头的所有元素，并附加hover个事件。

当你使用jQuery时，为什么要混合使用Vanilla JS和jQuery。你可以坚持一个。

＆＃13;

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/>', {
    	id: 'numero' + contador,
      text: '. ',
      class: 'box'
    });
   
    $outra.append($divCreation);
    contador = contador + 1;
  }
}

$('[id^=numero').hover(function(){
  $(this).css('background-color','yellow');
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

根本不需要使用ID ...只需使用公共类。此外，因为使用jQuery可以使用它来创建所有这些所需的代码少得多。

＆＃13;

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');
});

＆＃13;

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

＆＃13;

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

＆＃13;

使用javascript迭代添加一个类

3 个答案: