更改每个数组元素的颜色答案

【问题标题】：Changing colour of each array element更改每个数组元素的颜色
【发布时间】：2015-12-27 23:40:19
【问题描述】：

我是 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 部分添加注释行时，整个网页变黑。

【问题讨论】：

您希望悬停应用于 .wrapper 还是 .square？
To .square 我认为它代表了包装器中的 div 标签。我试着做乔希展示的东西，它奏效了。感谢大家的帮助。

标签： javascript jquery html css

【解决方案1】：

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

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

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

Example Here

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

但是，您可以使用 :hover pseudo-class 使用纯 CSS 执行此操作。你实际上并不需要 jQuery。

Example Here

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

【讨论】：

CSS 将是您所解释的更好的方法。
@Sahil 是的。如果可以使用纯 CSS 完成，请始终避免使用 jQuery :)
非常好的解释，我正在寻找类似的东西，从 Jquery 中做这件事，谢谢它对我有用...@Josh

【解决方案2】：

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

这是正确的

$(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");

       });
   });

WORKING FIDDLE

【讨论】：

【解决方案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>');
     }
     $('.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】：

那是因为你在这一行有语法错误

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

在调用$(this).css 函数之前，您将关闭悬停函数，因此被选中的“this”是主体。应该是：

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

【讨论】：

我没有撤消任何操作。我什至不知道你编辑了它。