Question

我尝试创建一个用户可以输入数字的网格，然后根据该网格创建一个网格（即 - 用户输入5，我创建一个5x5板）。

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

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

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

我尝试使用该代码的做法是根据输入＆＃39; cellCount＆＃39;更改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命令时调用定义为使用该数字的变量？

感谢您的任何建议

Answer 1

我认为你的事情过于复杂（不用担心，它会发生！）。宽度百分比仅为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);

Answer 2

好像你制作了一个有趣的游戏......记忆？我前段时间做了类似的事情，但没有代码在我身上。

你的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等，以满足您的特定需求。

如何根据变量在jquery中设置某些内容的宽度？

2 个答案: