更改每个数组元素的颜色

Question

我是HTML / CSS / JavaScript / Jquery的新手，我有一个div标记数组，这些标记表示为框。 当我将鼠标悬停在框上时，我想更改它们的颜色，但是我不确定如何访问每个div标签并更改其属性。

HTML：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="stylesheet3.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="script3.js"></script>
    <body>
        <div class="wrapper">
        </div>
    </body>
</head>
</html>

CSS：

    body 
{
    background:#000;
}
.square 
{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    border:2px solid #73AD21;
    height: 2.5rem;
    width: 2.5rem;
    background-color: white;
}

Javascript / Jquery：

       $(document).ready(function() {
       for(i=0; i<16; i++) {
       $('.wrapper').append('<div class="line">');
           for(j=0; j<16; j++) {
               $('.wrapper').append('<div class="square">'+j+'</div>');
           }
       $('.wrapper').append('</div>');
   }
   /*$('.wrapper').hover(function()) {
    $(this).css("background","#F00");
   }*/
   });

当我在Javascript / Jquery部分中添加注释行时，整个网页都会变黑。

Answer 1

当我在JavaScript / jQuery部分中添加注释行时，整个网页都会变黑。

那是因为存在语法错误。 发生这种情况时，不会附加任何.square元素，这正是您看到空白页的原因。

.hover()方法需要两个函数作为参数（悬停和悬停回调）。 因此，您似乎需要以下内容：

这里的例子

$('.wrapper .square').hover(function() {
  $(this).css("background", "#f00");
}, function() {
  $(this).css("background", "#fff")
});

但是，您可以使用:hover伪类对纯CSS进行此操作。 您实际上不需要jQuery。

这里的例子

.square:hover {
  background-color: #f00;
}

Answer 2

那是因为您在这行上有语法错误

$('.wrapper').hover(function()) {
    $(this).css("background","#F00");
}

在调用$(this).css函数之前，您要关闭悬停函数，以便所选的“ this”是主体。 它应该是：

$('.square').hover(function() {
    $(this).css("background","#F00");
}, function() {
    $(this).css("background","#FFF");
});

Answer 3

您的代码中在注释行上存在一些语法错误。

这是正确的

$(document).ready(function() {
   for(i=0; i<16; i++) {
   $('.wrapper').append('<div class="line">');
       for(j=0; j<16; j++) {
           $('.wrapper').append('<div class="square">'+j+'</div>');
       }
   $('.wrapper').append('</div>');
    }


    $('.square').hover(function() {
        $(this).css("background","#F00");
        },function(){
           $(this).css("background","#fff");

       });
   });

工作场所

Answer 4

希望你想要这个...

  $(document).ready(function() { for(i=0; i<16; i++) { $('.wrapper').append('<div class="line">'); for(j=0; j<16; j++) { $('.wrapper').append('<div class="square">'+j+'</div>'); } $('.wrapper').append('</div>'); } $('.wrapper').on('hover','.square',function() { $(this).css("background","#F00"); }); $('.wrapper').on('mouseleave','.square',function() { $(this).css("background","#FFF"); }); });

 body { background:#000; } .square { display: table-cell; vertical-align: middle; text-align: center; border:2px solid #73AD21; height: 2.5rem; width: 2.5rem; background-color: white; }

 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="stylesheet3.css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="script3.js"></script> <body> <div class="wrapper"> </div> </body> </head> </html>

更改每个数组元素的颜色

问题描述

4 个解决方案

解决方案1
3 已采纳 2015-12-27 04:43:39

解决方案2
1 2015-12-27 04:45:23

解决方案3
1 2015-12-27 04:47:09

解决方案4
1 2015-12-27 04:49:11

更改每个数组元素的颜色

问题描述

4 个解决方案

解决方案1 3 已采纳 2015-12-27 04:43:39

解决方案2 1 2015-12-27 04:45:23

解决方案3 1 2015-12-27 04:47:09

解决方案4 1 2015-12-27 04:49:11

解决方案1
3 已采纳 2015-12-27 04:43:39

解决方案2
1 2015-12-27 04:45:23

解决方案3
1 2015-12-27 04:47:09

解决方案4
1 2015-12-27 04:49:11