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')将选择所有项目并将css应用于所有项目，在您的情况下，所有栏都将高度设置为最后生成的随机数。在 each() 迭代器中使用$(this)来引用迭代器中的当前元素。

.each（）方法旨在使DOM循环结构简洁且不易出错。调用时，它会迭代属于jQuery对象的DOM元素。每次回调运行时，都会从0开始传递当前循环迭代。更重要的是，回调是在当前DOM元素的上下文中触发的，因此关键字 this 指的是元素。（ Taken from here ）

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

您甚至可以通过使用 each() 方法添加回调来删除 css() 迭代器，从而减少代码。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您每次都要调整该类，这会统一更改该类的每个元素...尝试使用$(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变量是全局的

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，随机高度

3 个答案: