Javascript 如何在jquery中基于变量设置内容的宽度？

我试图创建一个网格，用户可以在其中输入一个数字，然后我根据这个网格创建一个网格，即-用户输入5，我创建一个5x5板

在我尝试更改div的高度/宽度之前，我所有的代码都工作正常。我现在要做的是改变由一个div组成的每个网格的CSS，使其高度和宽度取决于创建的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) + "%");
});

我试图用这段代码做的是根据输入“cellCount”更改CSS定义的高度和宽度。因此，如果有人在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 + '%');

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

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');
}

以下是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等。

cellCount/cellCount*cellCount*100+%=>100/cellCount+'%'@dfsq如果它不能与原始代码一起工作，为什么优化要修复它？也许你应该先吃一剂自己的药，然后再分发给别人——我们写了几乎完全相同的东西。@ChristianVarga，嗯？你什么意思？@dfsq我只是复制了你在我的答案上写的评论。我不能帮你理解你自己写的东西。你试图击落我，因为我写了一篇优化，这很讽刺，因为你也写了一篇优化。换句话说，如果你要告诉人们写优化是没有用的，不要自己写优化。@ChristianVarga，你试图击倒我。不，我只是指出你原来的答案行不通。同时，我对这个问题的评论只是一个关于改进的注释，但它并没有试图回答这个问题。因此，您的反应有点奇怪。如果它不能与原始代码一起工作，为什么优化要修复它。这是一样的。是的，我太傻了，我一直在关注代码为什么没有运行，以意识到用这种方式键入代码要容易得多。尽管如此，代码还是不起作用，即使按照您现有的方式编写代码也会更好。设置高度/宽度时，我能引用这样的变量吗？@JeremyH您可能还需要发布CSS。项目是如何定位的？如果它们是浮动的，将高度设置为%将不起作用。最安全的方法是使用像素值instead@JeremyH我已经更新了我的答案，补充了几点可能对你也有帮助的地方。谢谢你的帮助，伙计。我主要是在你的帮助下完成的。我还是不明白这个该死的高度，但我已经离开了。从我在谷歌上搜索了很多次后看到的情况来看，我似乎无法将高度设为一个静态大小，并期望所有的div都能填满它。

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

    .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;
    }