CSSプロパティとしてjquery変数を使用すると、

Question

私はこれを正しく質問していない場合は私に許してください、私はこのサイトを初めて使っています。私はOdin ProjectのEtch-a-Sketchプロジェクトに取り組んでいますが、あなたにはそれに精通している人もいます。基本的にこの時点で、私がしようとしているのは、jqueryのボタンを使っていくつかのdivをサイズ変更することです。そして、div（高さと幅）のCSSプロパティを設定できるかどうかを知りたかったのです。 jquery変数を使用して新しいサイズを設定します。

[新規グリッド]ボタンをクリックすると、プロンプトに入力した数値に基づいてdivの高さと幅のサイズを変更します。ここで

は、私がこれまで持っているものです。

$("#new_grid").click(function() { 

var height = 448/size; 
var width = 448/size; 
var resizePix = function() { 
    $(".pixel").css({"height": ???, "width": ???}); 
     $(".pixel").appendTo("#grid"); 
    } 

var size = prompt("Enter new grid size (10 - 100):"); 
    if (size < 10) { 
     alert("Number is too small."); 
    } else if (size > 100) { 
     alert("Number is too big."); 
    } else if (size >= 10 || size <= 100) { 
     resizePix(); 
     } 

私は何を探していますが後にプロンプ​​トに入力されているものは何でも番号から来ている「サイズ」変数を反映.pixelのCSSプロパティを持っていますボタンをクリックします。たとえば、プロンプトが表示されたときに20と入力すると、448（サイズ変更しようとしているdivを保持するコンテナdivの高さと幅）を20で割り、その値を使用してCSSの高さと幅のプロパティを変更する必要があります。

これは正しい方法ですか？ resizePix関数が機能するのは、CSSを変更するために通常の値を使用するだけで、ボタンを使用したときに変更が反映されるためです。 CSSプロパティを変更するための高さと幅の変数を取得する方法を理解できません。

Answer 1

デバイドあなたの関数の内部ではなく、それ以外の

$("#new_grid").click(function() { 
 
    
 
    // Not here... 
 

 
    function resizePix() { 
 
    var px = 448/size; // ...but here (P.S: Math.round() could also help?) 
 
    $(".pixel").css({height: px, width: px }); 
 
    $(".pixel").appendTo("#grid"); // I think this line is useless 
 
    } 
 

 
    var size = prompt("Enter new grid size (10 - 100):"); 
 
    
 
    if (size < 10) { 
 
    alert("Number is too small."); 
 
    } else if (size > 100) { 
 
    alert("Number is too big."); 
 
    } else {       // yep, just a nice else 
 
    resizePix(); 
 
    } 
 

 
});

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

 
<button id="new_grid">GRID SIZE</button>