Wie man divs ändert, die von jQuery erzeugt werden?

Question

komplette Noob Frage hier:

Ich habe dieses 16x16 Raster von von jQuery

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>

Kann ich irgendwie die addClass und removeClass (oder etwas anderes) verwenden, um erzeugt divs ändere die Hintergrundfarbe jedes Divs einzeln, wenn du mit dem Mauszeiger über sie gehst?

Ich habe versucht, etwas auszuarbeiten, aber ich bin mir nicht einmal sicher, ob es möglich ist oder nicht.

Answer 1

addClass()/removeClass() (oder sogar JS) wird dafür nicht benötigt - Sie können es mit dem :hover pseduo Selektor von CSS allein erreichen. Versuchen Sie folgendes:

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

Arbeitsbeispiel:

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>

Answer 2

neben dem :hover pseduo Selektor, müssen Sie möglicherweise eine tatsächliche Klasse, um es mit JS hinzufügen (vielleicht wäre es machen mehr Sinn, wenn durch ein anderes Ereignis ausgelöst wird), hier ist jedoch ein Beispiel mit 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>