Question

我一直在给jquery fizz buzz要求过滤输出Down然后在那里有100个结果，他们需要存储在10x10网格中我不会大声使用表格和生活我无法理解！

            $(document).ready(function () {

            var fizzbuzzList = $('#fizzbuzz-list');

            for (var i = 1; i <= 100; i++) {
                var output = i;
                // if i is divisible by 3
                if (i % 3 === 0) {
                    output = '<div class="fizz">fizz</div>';
                }
                // if i is divisible by 5
                if (i % 5 === 0) {
                    output = '<div class="buzz">buzz</div>';
                }
                // if i is not divisble by 3 or 5
                if (i % 15 === 0) {
                    output = '<div class="fizzbuzz">fizz buzz</div>';
                }

                fizzbuzzList.append($('<div class="output">' + output + '</div>'));
            }

        });

    <div id="fizzbuzz-list"></div>

Answer 1

如果我理解您要做的事情，您希望第一列中的结果为1-10，第二列中的结果为11-20，依此类推？您应该可以使用flexbox轻松完成此操作。

在父#fizzbuzz-list容器上设置一个固定的高度和宽度，基于10-tall和10-wide固定宽度＆＃39; .output＆＃39;元素并使用列布局将其配置为flexbox。

这应该这样做：

＆＃13;

var fizzbuzzList = document.getElementById("fizzbuzz-list");

for (var i = 1; i <= 100; i++) {
  var output = i;
  // if i is divisible by 3
  if (i % 3 === 0) {
    output = '<div class="fizz">fizz</div>';
  }
  // if i is divisible by 5
  if (i % 5 === 0) {
    output = '<div class="buzz">buzz</div>';
  }
  // if i is not divisble by 3 or 5
  if (i % 15 === 0) {
    output = '<div class="fizzbuzz">fizz buzz</div>';
  }
  
  fizzbuzzList.innerHTML = fizzbuzzList.innerHTML + '<div class="output">' + output + '</div>';
}

＆＃13;

#fizzbuzz-list {
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  height: 420px;  /* sized for 10 elements @40px high + 2px of borders */
  width: 420px;  /* sized for 10 elements @40px wide + 2px of borders  */
}

.output {
  height: 40px;
  width: 40px;
  border: 1px solid #000000;
}

＆＃13;

<div id="fizzbuzz-list"></div>

＆＃13;

你可以根据需要设计盒子的样式;我保持简单。我还将您的JavaScript调整为vanilla，因此它在嵌入式代码段中运行（如果它可以使用jQuery，我还不完全熟悉嵌入式代码段）。

最后一点，如果您需要支持旧浏览器（尤其是IE），您可能需要为flexbox CSS添加一些浏览器前缀规则。你可以在https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties找到很多好的CSS flexbox信息，你也可以在http://zomigi.com/blog/flexbox-syntax-for-ie-10/找到一些旧的IE特定语法。

希望这一切都有帮助！

Fizz buzz Jquery Down然后穿过

1 个答案: