使用jQuery變量作爲CSS屬性

原諒我，如果我沒有問這個問題，我是這個網站的新手。我正在從The Odin Project的Etch-a-Sketch項目開始工作，你們中的一些人可能會熟悉它。基本上在這一點上，我想要做的是使用jquery中的按鈕來調整一些div的大小，並且我想知道是否可以使用函數設置這些div（高度和寬度）的CSS屬性使用jQuery變量來設置新的大小。使用jQuery變量作爲CSS屬性

當我單擊新建網格按鈕時，我希望它根據我在提示中輸入的數字來調整我的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屬性。

來源

2017-04-23 Justin D

不知道我的理解，但是這是你想要做什麼？ https://codepen.io/anon/pen/EmyqvQ –

爲什麼使用'$（「。pixel」）。appendTo（「＃grid」）;'不是單元的數量取決於新的網格大小？ –

另外這個'else if（size> = 10 || size <= 100）{'是完全不必要的。你只需要'else {'（因爲你已經在前面的語句中定義了範圍） –

除以你的函數裏面，不在外面吧

$("#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>

來源

2017-04-23 21:33:37

這樣做，謝謝！ –

@JustinD如果它解決了您的問題，請將此答案標記爲已接受。 –

使用jQuery變量作爲CSS屬性

回答

相關問題