如何修改由jQuery生成的div？

问题描述：

我的jQuery产生的div这个16×16格

var rows = 16; 
 
var columns = 16; 
 
var $row = $("<div />", { 
 
    class: 'row' 
 
}); 
 
var $square = $("<div />", { 
 
    class: 'square' 
 
}); 
 

 
$(document).ready(function() { 
 
    for (var i = 0; i < columns; i++) { 
 
    $row.append($square.clone()); 
 
    } 
 

 
    for (var x = 0; x < rows; x++) { 
 
    $(".box_main").append($row.clone()); 
 
    } 
 
});

.row { 
 
    width: auto; 
 
    height: 40px; 
 
    background: #313131; 
 
} 
 
.square { 
 
    width: 40px; 
 
    height: 40px; 
 
    border-radius: 10px; 
 
    margin: 0; 
 
    display: inline-block; 
 
    background: #fff; 
 
}

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

我可以以某种方式使用addClass与removeClass（或其他东西），以将鼠标悬停在/ mouseenter上时，逐个更改每个div的背景颜色？

我尝试了一些东西，但我甚至不确定是否可以或不这样做。

是的，你可以使用CSS类来改变你的'div's的造型。在问你之前，你可能想先尝试一下。 ;） – evolutionxbox

使用jQuery很容易，但使用CSS更容易。使用选择器'''.square：hover'''制作新的样式，并在那里设置背景颜色。 –

我试过，但我甚至不确定要选择哪个元素？每次我做了一些网格消失的事情。 – mbt86

答

addClass()/removeClass()（或者甚至JS）不需要这个 - 你可以使用单独的CSS的:hover pseduo选择器来实现它。试试这个：

.square:hover { 
    background: #C00; /* amend colour as needed */ 
}

工作例如：

var rows = 16; 
 
var columns = 16; 
 
var $row = $("<div />", { 
 
    class: 'row' 
 
}).appendTo('body'); 
 
var $square = $("<div />", { 
 
    class: 'square' 
 
}); 
 

 
$(document).ready(function() { 
 
    for (var i = 0; i < columns; i++) { 
 
    $row.append($square.clone()); 
 
    } 
 

 
    for (var x = 0; x < rows; x++) { 
 
    $(".box_main").append($row.clone()); 
 
    } 
 
});

body { 
 
    background: #313131; 
 
} 
 
.row { 
 
    width: auto; 
 
    height: 40px; 
 
    background: #313131; 
 
} 
 
.square { 
 
    width: 40px; 
 
    height: 40px; 
 
    border-radius: 10px; 
 
    margin: 0; 
 
    display: inline-block; 
 
    background: #fff; 
 
} 
 
.square:hover { 
 
    background: #C00; 
 
}

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

Thansk我不确定是否：如果我想为不同的按钮使用不同的颜色，可以使用悬停？ – mbt86

它可以工作，但我需要更多关于支配哪些颜色应该在哪些元素上使用的逻辑的细节。我建议你用这些细节开始一个新的问题。 –

答

的:hover pseduo选择旁边，你可能需要一个实际的类添加到它与JS（也许会更有感觉是否由其他事件触发），但是，这里是一个使用JS的例子（addClass/removeClass）

var rows = 16; 
 
var columns = 16; 
 
var $row = $("<div />", { 
 
    class: 'row' 
 
}); 
 
var $square = $("<div />", { 
 
    class: 'square' 
 
}); 
 
$row.appendTo('body'); 
 

 
$(document).ready(function() { 
 
    for (var i = 0; i < columns; i++) { 
 
    $row.append($square.clone()); 
 
    } 
 

 
    for (var x = 0; x < rows; x++) { 
 
    $(".box_main").append($row.clone()); 
 
    } 
 

 
    $('.square').hover(function() { $(this).addClass('hovering'); }, function() { $(this).removeClass('hovering'); }); 
 
});

.row { 
 
    width: auto; 
 
    height: 40px; 
 
    background-color: #313131; 
 
} 
 
.square { 
 
    width: 40px; 
 
    height: 40px; 
 
    border-radius: 10px; 
 
    margin: 0; 
 
    display: inline-block; 
 
    background-color: #fff; 
 
} 
 
.hovering { 
 
    background-color: cyan; 
 
    border: 3px dashed blue; 
 
    width: 34px; 
 
    height: 34px; 
 
}

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

悬停的作品，但如果我想让它像“绘画”一样工作呢？我想我问了错误的问题* facepalm – mbt86

如何修改由jQuery生成的div？

相关推荐