Erstellen Sie benutzerdefinierte quadratische Raster mit Jquery

Question

Ich arbeite an einem Projekt zu versuchen, etwas wie eine Etch-a-Skizze zu machen. Ich habe ein 780x780px Quadrat und ich versuche ein 16x16 Raster zu erhalten, indem ich eine Reihe kleinerer quadratischer divs verwende.

Auf diesem Raster habe ich den Hover-Effekt. Ich bekomme immer ein 15x17 Raster von quadratischen Divs, weil das letzte Quadrat der Reihe nicht passt. Ich habe Ränder auf 1px und Padding auf 0 gesetzt, also dachte ich mir, dass ich, um 16 Quadrate auf einer 780px breiten Reihe zu passen, die Ränder (15 1px Ränder) berücksichtigen müsste und von dort könnte ich teilen (780-15) um 16, die Anzahl der Quadrate, die ich will.

, das nicht funktioniert, und der nächste Schritt dieses Projekts ist es, eine Taste haben, wo die Benutzereingabe könnte eine beliebige Anzahl von Feldern für die Zeile/Spalte, und entweder eine größere oder kleinere squared grid STILL ON haben die 780x780 Quadrat. Hat jemand irgendwelche Ideen? Ich bin ziemlich ratlos.

$(document).ready(function() { 
 
    var original = 16; 
 
    for (var y = 0; y < original * original; y++) { 
 
    $(".squares").width((780 - 15)/original); 
 
    $(".squares").height((780 - 17)/original); 
 
    $("<div class='squares'></div>").appendTo('#main'); 
 
    } 
 
    $('.squares').hover(
 
    function() { 
 
     $(this).addClass('hover'); 
 
    } 
 
) 
 

 
}); 
 

 
function gridq() { 
 
    $('.squares').removeClass('hover'); 
 
    $('div').remove('.squares'); 
 

 
    var newgrid = prompt("How many squares on each side?"); 
 
    var widthscreen = 192; 
 

 
    if (newgrid > 0) { 
 
    for (var x = 0; x < newgrid * newgrid; x++) { 
 
     $(".squares").width(widthscreen/newgrid); 
 
     $(".squares").height(widthscreen/newgrid); 
 
     $("<div class='squares'></div>").appendTo('#main'); 
 
    } 
 
    $('.squares').hover(
 
     function() { 
 
     $(this).addClass('hover'); 
 
     } 
 
    ) 
 
    } 
 
}

#main { 
 
    height: 780px; 
 
    width: 780px; 
 
    background-color: antiquewhite; 
 
    position: relative; 
 
} 
 
.squares { 
 
    margin: 1px; 
 
    padding: 0; 
 
    background-color: aquamarine; 
 
    display: inline-block; 
 
    float: left; 
 
} 
 
.hover { 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id=main> 
 
</div> 
 
<button onclick="gridq()">Go Again!</button>

Answer 1

diese Schnipsel versuchen? Die Gitterinitialisierung wird in der Funktion grid() festgelegt und später bei Bedarf aufgerufen. Die Breite wird dynamisch auf die rechte Seite des 16. Quadrats eingestellt. Die restlichen Quadrate werden nach Bedarf ausgefüllt.

var wide = (780 - 15)/16, 
 
    tall = (780 - 17)/16; // set the square dimensions. this can be incorporated into the grid() function with 16 replaced by 'original' 
 

 
function grid(x, y) { 
 
    var original = x, 
 
    y = y; 
 
    $("#main").empty(); // empty and restart 
 
    $("#main").width(wide * (original + 1)); 
 

 
    for (var i = 0; i < original * y; i++) { 
 

 
    $("<div class='squares'></div>").appendTo('#main'); 
 
    } 
 

 
    var square = $(".squares"); 
 
    square.width(wide); 
 
    square.height(tall); 
 

 
    var side = square.eq(original - 1).position().left + square.width() + 2; // tighten the #main width 
 
    $("#main").width(side); 
 

 
    $('.squares').hover(
 
    function() { 
 
     $(this).addClass('hover'); 
 
    } 
 
) 
 
} 
 

 
grid(16, 16); // starting dimension 
 

 
function gridq() { 
 
    $('.squares').removeClass('hover'); 
 
    $('div').remove('.squares'); 
 

 
    var newgrid = prompt("How many squares on each side?"); 
 
    var widthscreen = 192; 
 

 
    if (newgrid > 0) { 
 
    grid(newgrid, newgrid); 
 
    } 
 
}

#main { 
 
    background-color: antiquewhite; 
 
    position: relative; 
 
} 
 
.squares { 
 
    margin: 1px; 
 
    padding: 0; 
 
    background-color: aquamarine; 
 
    display: inline-block; 
 
    float: left; 
 
} 
 
.hover { 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id='main'> 
 
</div> 
 
<button onclick="gridq()">Go Again!</button>

Answer 2

bekam nur um es zu schlagen ... krank Post dies, da es die Frage etwas anders beantwortet und ich fühle mich ein wenig sauberer. Auch habe ich eine Breite und eine Höhe Eingabeaufforderung hinzugefügt.

sehen die codepen here

Als Randnotiz ... seine gute Praxis die Namen Ihrer Variablen sinnvoll zu machen. Auch finde ich, dass das Aufschlüsseln Ihrer Code-Probleme in kleinere, überschaubarere Stücke es weniger überwältigend erscheinen lässt ... Schritt für Schritt :)

Viel Spaß und viel Glück!

$(document).ready(function() { 
 
    //declare the variables at the top of your functions...it enables us to change them later 
 
    var columnWidthCount = 16; 
 
    var columnHeightCount = 16; 
 
    
 
    function makeBoxes() { 
 
    //boxcount lets us set how many times we want the for loop to run...when we change the columns/rows later this variable will be updated 
 
    var boxCount = columnWidthCount * columnHeightCount; 
 
    // 
 
    for (var i = 0; i < boxCount; i++) { //loop through each box 
 
    //any code you place in here will execute each time we loop around 
 
     $("<div class='squares'></div>").appendTo('#main'); 
 
    } 
 
    //we only want to declare this once so we place it after the loop 
 
    $(".squares").width((780/columnWidthCount) - 2); 
 
    $(".squares").height((780/columnHeightCount) - 2); 
 
    $('.squares').hover(
 
     function() { 
 
     $(this).addClass('hover'); 
 
     } 
 
    ); 
 
    } 
 
    //fire the initial function 
 
    makeBoxes(); 
 
    // fire function after click 
 
    $('button').on("click", function() { 
 
    
 
    $('div').remove('.squares'); 
 

 
    var squaresHigh = prompt("How many squares high? (must be a number)"); 
 
    var squaresWide = prompt("How many squares wide? (must be a number)"); 
 
    //prompt returns a string...use parseInt to turn that number string into an integer 
 
    columnWidthCount = parseInt(squaresWide); 
 
    columnHeightCount = parseInt(squaresHigh); 
 

 
    makeBoxes(); 
 
    }); 
 
});

#main { 
 
    height: 780px; 
 
    width: 780px; 
 
    background-color: antiquewhite; 
 
    position: relative; 
 
    font-size:0; 
 
    white-space:nowrap; 
 
} 
 
.squares { 
 
    margin: 1px; 
 
    padding: 0; 
 
    background-color: aquamarine; 
 
    display: inline-block; 
 
    float: left; 
 
} 
 
.hover { 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id=main> 
 
</div> 
 
<button>Go Again!</button>