更改每个数组元素的颜色
[英]Changing colour of each array element
问题描述
I am new to HTML/CSS/JavaScript/Jquery/ I have an array of div tags which are represented as boxes. 
我是HTML / CSS / JavaScript / Jquery的新手，我有一个div标记数组，这些标记表示为框。 I would like to change the colour of the boxes when I hover over them but I am not sure how to access each div tag and change its properties. 当我将鼠标悬停在框上时，我想更改它们的颜色，但是我不确定如何访问每个div标签并更改其属性。
HTML: 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: 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: 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");
}*/
});
When I add the commented lines in Javascript/Jquery section, the whole webpage becomes black. 当我在Javascript / Jquery部分中添加注释行时，整个网页都会变黑。
4 个解决方案
解决方案1
3 已采纳 2015-12-27 04:43:39
When I add the commented lines in JavaScript/jQuery section, the whole webpage becomes black.
That's because there is a syntax error. 那是因为存在语法错误。 When this occurs, none of the .square elements are being appended, which is exactly why you are seeing a blank page. 发生这种情况时，不会附加任何.square元素，这正是您看到空白页的原因。
The .hover() method expects two functions as parameters (a hover-in, and hover-out callback). .hover()方法需要两个函数作为参数（悬停和悬停回调）。 Therefore it seems like you want the following: 因此，您似乎需要以下内容：
$('.wrapper .square').hover(function() {
$(this).css("background", "#f00");
}, function() {
$(this).css("background", "#fff")
});
However, you can do this with pure CSS using the :hover pseudo-class . 但是，您可以使用:hover伪类对纯CSS进行此操作。 You don't actually need jQuery for this. 您实际上不需要jQuery。
.square:hover {
background-color: #f00;
}
解决方案2
1 2015-12-27 04:45:23
That is because you have a syntax error on this line 那是因为您在这行上有语法错误
$('.wrapper').hover(function()) {
$(this).css("background","#F00");
}
You are closing the hover function before you call the $(this).css function so the "this" that is being selected is the body. 在调用$(this).css函数之前，您要关闭悬停函数，以便所选的“ this”是主体。 It should be: 它应该是：
$('.square').hover(function() {
$(this).css("background","#F00");
}, function() {
$(this).css("background","#FFF");
});
解决方案3
1 2015-12-27 04:47:09
There is some syntactical error in your code on commented lines. 您的代码中在注释行上存在一些语法错误。
This is correct one 这是正确的
$(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");
});
});
解决方案4
1 2015-12-27 04:49:11
Hope you want this... 希望你想要这个...
$(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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.