Question

我正在尝试模仿一个吉他指板，并且我很困惑如何复制我创建的div并在下面追加~10个。每行代表一个字符串，现在我正在尝试添加更多具有相同属性的div来创建整个指板。

尝试使用for循环来循环我创建了10次的指板div，但没有运气：

var strings = ["E", "A", "D", "G", "B", "e"];
var frets = 15;


for (i = 0; i < strings.length; i++) {
  var $div = $("<div/>");
  var $input = $("<input type='checkbox'>");
  $input.attr("data-string", strings[i]);
  //need to loop through frets to have data-fret = to fret number
  $input.attr("data-fret", 0);
  //need to loop through ids to create strings+fret num
  $input.attr("id", "E0");
  $div.append($input);

  //label should be same as id = string + fret num. for must equal id exactly
  var $label = $("<label for='E0'></label>");

  $div.append($input);
  $div.append($label);
  $('.fretboard').append($div);

}

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

Answer 1

看起来你需要一个外部循环来处理添加音品，而你的内部循环（你现在拥有的那个）将为该音品创建字符串。

这可能需要更改CSS，因为我已经在html中添加了新的div.fret。其中每个代表.fretboard上的音品级别。请参阅此类似jsfiddle的示例。

var strings = ["E", "A", "D", "G", "B", "e"];
var frets = 15;

for(var f = 0; f < frets; f++) {
  // create a new row that will represent this fret level
  var $fret = $("<div class='fret' data-fret='"+f+"'/>");

  for (i = 0; i < strings.length; i++) {
    var $div = $("<div/>");
    var $input = $("<input type='checkbox'>");
    $input.attr("data-string", strings[i]);
    // use f as the fret number
    $input.attr("data-fret", f);
    // set id to strings[i]+fret num
    var id = strings[i] + f;
    $input.attr("id", id);
    $div.append($input);

    // use id again
    var $label = $("<label for='"+id+"'></label>");

    $div.append($input);
    $div.append($label);
    $fret.append($div); // add to the fret, not the fretboard

  }

  // done creating the row, now append that to the fretboard
  $('.fretboard').append($fret);
}

如果您希望指板垂直显示，则此jsfiddle会应用必要的样式定义。给你的fret div是fret类名，而内部div是note类名。总结一下：

.fret {
  display: block;
}
.note {
  display: inline-block;
}

如何循环显示一系列div以使它们出现在另一个之下？

1 个答案: