如何在jquery中基于变量设置某个东西的宽度

How can I set the width of something in jquery based on variables?

本文关键字：设置 变量 jquery 于变量      更新时间：2023-09-26

我正在尝试创建一个网格，用户可以在其中输入数字，然后我在此基础上创建一个栅格（即，用户输入5，我创建一个5x5板）。

直到我尝试更改div的高度/宽度，我的所有代码都一直在工作。我现在要做的是更改每个网格的CSS（由div制成），使其高度和宽度取决于创建的div的数量（我希望5x5板占据与10x10相同的空间）。

我根据输入设置要创建的div的数量。然后我运行一个循环，创建基于（input*input）的div。这一切都奏效了。当我尝试这样做时，我的代码停止工作：

$(".indivCell").css("width", function() {
    return (((cellCount / (cellCount * cellCount))*100) + "%");
});
$(".indivCell").css("height", function() {
    return (((cellCount / (cellCount * cellCount))*100) + "%");
});

我试图用这段代码来改变CSS定义的基于输入"cellCount"的高度和宽度。因此，如果有人对cellCount提示输入了5的答案，我希望宽度变为（（5/（5*5）*100）%。我在谷歌上搜索了很多，有人建议使用这个功能/返回路线。以前，我尝试过这个：

$(".indivCell").css("width", (((cellCount / (cellCount * cellCount))*100) + "%")
$(".indivCell").css("height", (((cellCount / (cellCount * cellCount))*100) + "%")

我现在看到的也不起作用。这是整个代码片段：

$(document).ready(function() {
var cellCount = prompt("Choose a number between 4 and 12 determine the size of your game board!");
if (cellCount > 3 && cellCount < 13) {
$(".indivCell").css("width", function() {
    return (((cellCount / (cellCount * cellCount))*100) + "%");
});
$(".indivCell").css("height", function() {
    return (((cellCount / (cellCount * cellCount))*100) + "%");
});
for (var i = 0; i < (cellCount * cellCount); i += 1) {
$(".wrapper").append("<div class='indivCell'></div>");
};
} else {
alert("Welp, you failed to follow pretty basic instruction. Now you're getting a small board!");
var cellCount = 4;
for (var i = 0; i < (cellCount * cellCount); i += 1) {
$(".wrapper").append("<div class='indivCell'></div>");
};
}
});
$(document).ready(function() {
$(".indivCell").hover(
function() {
    $(this).addClass('highlight');
},
function() {
    $(this).removeClass('highlight');
});
});

我的问题本质上是，如何调用一个定义为在设置jquery.css命令时使用该数字的变量？

感谢您的任何建议

我认为您已经将事情过度复杂化了（别担心，它会发生的！）。宽度的百分比仅为100/单元数。例如，如果你有5个单元格，100/5=20%，这样的东西应该有效：

var cellSize = 100 / cellCount;
$(".indivCell").width(cellSize + '%');

另一个问题是，在尝试设置大小之后添加.indivCell项。这行不通；对.width（）的调用将仅应用于执行时存在的元素。因此，您需要先将这些项添加到DOM中，然后设置它们的大小。

for (var i = 0; i < (cellCount * cellCount); i += 1) {
    $(".wrapper").append("<div class='indivCell'></div>");
});
var cellSize = 100 / cellCount;
$(".indivCell").width(cellSize + '%');

最后，如果元素没有完全定位，那么作为%的高度就不会像你预期的那样起作用（这是另一个话题，我相信你可以在其他SO答案中找到）。解决方法之一是避免使用%s，而是使用基于父容器的像素宽度。

var cellSize = $('.wrapper').width() / cellCount;
$(".indivCell").width(cellSize).height(cellSize);

如果父对象不是完全正方形，也可以独立设置宽度/高度。

var cellWidth = $('.wrapper').width() / cellCount;
var cellHeight = $('.wrapper').height() / cellCount;
$(".indivCell").width(cellWidth).height(cellHeight);

看起来你正在制作一款有趣的游戏。。。记忆力我不久前也做过类似的事情，但我身上没有代码。

你的for循环应该是这样的：

for (var i = 0; i < cellCount * cellCount; i++) {
   $('<div/>', {
       id: 'cell' + i,
       class: 'indivCell',
       //add what ever other attributes you want, this will help 
       //later on when you trying to access each div inside the grid
   }).appendTo('.wrapper');
}

然后确保在for循环之外（为了性能）：

    var cellSize = (100 / cellCount) / 2;
    $(".indivCell").width(cellSize + '%');
    $(".indivCell").height(cellSize + '%');

这是css：

    .wrapper {
        width: 100%;
        height: 500px;
    }
    .indivCell {
        position: relative;
        background-color: #F00;
        display:inline-block;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border: 5px solid #FFF;
        padding:0;
    }

这将给你一个视觉输出（可能接近你想要的），然后你可以开始相应地更改CSS等，以满足你的特定需求。

相关文章：