Ich habe versucht, die Größe meiner ".Square" divs zu ändern, die mit JS/JQuery erstellt werden. Ich habe erfolgreich die Größe des Container-div geändert, aber die Verwendung des exakt gleichen Codes funktioniert nicht für die dynamisch erstellten .square-divs, obwohl ich die .square-divs auf andere Weise anwenden kann. Ich habe versucht, das Problem in den letzten zwei Tagen zu verstehen und habe Lösungen geschrieben und umgeschrieben, aber ich denke, dass meine derzeitigen Fähigkeiten eine sehr einfache Antwort übersehen.Problem beim Anwenden von CSS-Änderungen auf dynamisch erstellte über JS/JQuery
Ziel war es, die Größe der .square divs durch die Anzahl der Quadrate im Container bestimmen zu lassen. Je mehr Quadrate, desto kleiner die .square div css.
Danke für jede Hilfe, die jemand geben kann.
$(document).ready(function() {
var create = function(king) {
return $("#container").prepend("<div class='square' id=king></div>");
}
var sLoad = function() {
for (i = 0; i < 16; i++) {
$("#16").click(function() {
$("#container").prepend("<div class='square'></div>");
});
};
};
sLoad();
$("#clear").on("click", function() {
$(".square").remove();
num = prompt("How many squares would you like?");
// \t \t var containerSize = function(){
// \t \t \t var siz = 112 * num;
// \t \t \t $("#container").css({"height": siz+15+"px" , "width": siz+"px"});
// \t \t }
// \t \t containerSize()
$(".square").css({
"height": "50px",
"width": "50px"
});
var make = function(num) {
return num * num;
};
//var squareSize = function(){
// \t var sqr = 600/make(num);
// \t $(".square").css({"height":sqr+"px" , "width":sqr+"px"});
//};
//squareSize();
for (i = 0; i < make(num); i++) {
$("#container").prepend("<div class='square'></div>");
};
});
// \t $(".button").click(function(){
// \t \t
//making the square dis and reappear
$("#container").on("mouseenter", function() {
$(".square").mouseenter(function() {
$(this).fadeTo("fast", 0);
}),
$(".square").mouseleave(function() {
$(this).fadeTo("fast", 1);
});
});
});#menuContainer {
height: 45px;
width: 50%;
margin: auto;
}
#container {
width: 600px;
height: 600px;
border: 1px blue dotted;
border-radius: 2%;
margin: auto;
padding: 0px;
}
#controlDiv {
height: 30px;
width: 30px;
border: 1px dashed red;
margin: auto;
margin-top: 50%;
background-color: black;
}
.square {
width: 100px;
height: 100px;
background-color: grey;
border: 1px black dashed;
border-radius: 3%;
margin: 5px 5px 5px 5px;
display: inline-block;
}
.button {
height: 27px;
width: 70px;
background-color: gold;
border: solid 1px yellow;
text-decoration-color: blue;
border-radius: 5%;
text-align: center;
padding-top: 7px;
/*margin: auto;*/
margin-bottom: 4px;
display: inline-block;
}<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="menuContainer">
<div class="button" id="16">Click</div>
<div class="button" id="clear">Clear</div>
</div>
<div id="container">
<!-- \t <div id="controlDiv"></div> -->
</div>
<!--<div class="square"></div>-->
</body>
</html>
Nichts scheint zu funktionieren. Ich habe eine [** JSFIDDLE **] (https://jsfiddle.net/x0x9rv30/) erstellt. – brk
@ user2181397 für den Code zu arbeiten, müssen Sie die JQ-Bibliothek in JSFiddle laden –
Hier ist die Arbeit fiddle: https://jsfiddle.net/x0x9rv30/1/ –