JS，随机高度

Question

我希望我的脚本添加 72 小项目，最后它应该看起来像一个音轨。每个项目都应该有另一个 30-90px 的高度，但每个人的高度都相同。我找不到我的问题..感谢您的回答。

function frequencyContent() {
    var i = 0;
    while (i < 72) {
        $('.freqInner').append('<div class="frequencyItem"></div>');
        i++;
    };
    $('.frequencyItem').each(function() {
        h = Math.floor(Math.random() * 60) + 30;
        $('.frequencyItem').css("height", h);
    });
};

Answer 1

$('.frequencyItem') 将 select 所有项目并将 css 应用于所有项目，在您的情况下，所有栏将设置高度为最后生成的随机数。在 each() 迭代器中使用 $(this) 来引用迭代器中的当前元素。

The .each() method is designed to make DOM looping constructs concise and less error-prone. When called it iterates over the DOM elements that are part of the jQuery object. Each time the callback runs, it is passed the current loop iteration, beginning from 0. More importantly, the callback is fired in the context of the current DOM element, so the keyword this refers to the element. ( Taken from here )

var i = 0;
while (i < 72) {
  $('.freqInner').append('<div class="frequencyItem"></div>');
  i++;
};
$('.frequencyItem').each(function() {
  var h = Math.floor(Math.random() * 60) + 30;
  $(this).css("height", h);
});

.frequencyItem {
  width: 5px;
  background: red;
  display: inline-block;
  margin-right: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="freqInner"></div>

您甚至可以通过使用css()[添加回调来移除each()迭代器来减少代码 迭代自身的方法。

var i = 0;
while (i < 72) {
  $('.freqInner').append('<div class="frequencyItem"></div>');
  i++;
};

$('.frequencyItem').css('height', function() {
  return Math.floor(Math.random() * 60) + 30;
});

.frequencyItem {
  width: 5px;
  background: red;
  display: inline-block;
  margin-right: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="freqInner"></div>

或者更简单的方法是在生成元素时应用 css，也 generate element using jQuery。

for (var i = 0; i < 72; i++) {
  $('.freqInner').append($('<div>', {
    class: 'frequencyItem',
    css: {
      height: Math.floor(Math.random() * 60) + 30
    }
  }));
};

.frequencyItem {
  width: 5px;
  background: red;
  display: inline-block;
  margin-right: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="freqInner"></div>

Answer 2

您每次都在调整 class，这会用 class 统一更改每个元素...尝试使用 $(this) 调整每个单独的元素，如下所示：

function frequencyContent() {
    var i = 0;
    while (i < 72) {
        $('.freqInner').append('<div class="frequencyItem"></div>');
        i++;
    };
    $('.frequencyItem').each(function() {
        h = Math.floor(Math.random() * 60) + 30;
        $(this).css("height", h);
    });
};

Answer 3

这与其他人所说的基本相同，但无论如何，这是我的版本 2 更有效，因为它是在第一个循环的一次传递中完成的。

请注意，您的 h 变量有一个 acidental 全局变量

function frequencyContent() {
    var i = 0;
    while (i < 72) {
        $('.freqInner').append('<div class="frequencyItem"></div>');
        i++;
    };
    $('.frequencyItem').each(function() {
        var h = Math.floor(Math.random() * 60) + 30;
        $(this).css("height", h);
    });
};

简单一关版

function frequencyContent() {
    var i = 0;
    while (i < 72) {
        $('.freqInner').append
        ($('<div class="frequencyItem" />').css(
          'height'
          ,Math.floor(Math.random() * 60) + 30))
        i++;
    };
};

JS，随机高度

JS, random Height

html

javascript