Question

我是一名吉他瘾君子，我试图为吉他指法制作一个用户界面。

在我的js代码中，您可以看到

var notes = ['s6f1'，'s5f5'，'s4f7'，'s3f6'，'s2f5'，'s1f3'，'s6f8'， 's5f1'，'s4f6'，'s3f1'，'s2f3'，'s1f3'，'s6f9'，'s5f17'，'s4f19'];

's6f1'表示字符串6＆amp;烦恼1，我想在tablature上显示它。我展示这个的方法是在字符串6上放一个“1”。请看下面的图片。在我的代码中，我基本上遍历notes数组并将每个音符附加到tablature上。我将每6 6行定义为一组。在组中填充4个音符后，将显示一个新组。因为在我的实际应用程序中，我不知道注释数组有多少注释（在这个例子中，我只是简化了15个注释），我必须动态创建每个组并为每一行分配一个唯一的id。我的问题是我不知道如何在字符串上附加数字。例如，在动态创建“六行”后，如何附加数字在正确的行上。我认为我的问题中的挑战是我不能在html中预定义六线的位置。下面的代码是我写的html，css，js代码。希望有人可以帮助我。先感谢您。

HTML：

<!DOCTYPE html>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="code.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="code_js.js"></script>
</head>
<body>

    </div>

        <div id = "output">

</body>
</html>

的CSS：

.deco {
    border-bottom: 1px solid black;
    width: 120px;
    margin-left:0px;
    margin-bottom:10px;
    z-index: 2;
    position: relative;
    display: block;
    margin-right: 20px;
}


#output {
    width: 300px;
    height: 200px;
    position:absolute;
    float:left;
    background-color: yellow;
}


.six_line {
    width: 125px;
    height: 80px;
    float:left;
    margin-right: 20px;
}

JS：

"use strict"
var count = 0;
var group = -1;
$(document).ready(function() {
    var notes = ['s6f1', 's5f5', 's4f7', 's3f6', 's2f5', 's1f3', 's6f8', 's5f1', 's4f6', 's3f1', 's2f3', 's1f3', 's6f9', 's5f17', 's4f19'];
    hideNote(notes, 0);
});

function hideNote(notes, i) {
    var x = -2;
    if(count == 4) {count = 0;}
    if(count++ == 0) {
        group++;
        makeItHappen();
    } 
    var ns4 = notes[i];
    // retrive the info of string
    var ns2 = ns4.substring(0,2);
    x = parseInt(ns4.substring(1,2)) + (group*6);
   **/*How to attach fret(#) on the string*
       // finds the line with corresponding id
       $('#hr' + x).attr('class', '?');
   */**
    hide(function(){
        if(++i < notes.length) {
            hideNote(notes, i);
        }
    },notes[i]);
}

function hide(callback, note) {
    setTimeout(function(){
        callback();
    }, 1000); 
}

function makeItHappen() {
    var six = document.createElement('div');
    six.className = "six_line";
    for (var i = 1; i < 7; i++) {
        var hr = document.createElement('hr');
        hr.className = "deco";
        hr.id = "hr" + (group * 6 + i);
        six.append(hr);
    }
    $('#output').append(six);
}

Answer 1

我建议您对代码进行一些修改。从创建字符串的函数开始：

function makeItHappen(nbGroup) {  
    for(var g = 1; g <= nbGroup; g++){
        var six = document.createElement('div');
        six.className = "six_line";
        for (var i = 6; i >= 1; i--) {
            var string = document.createElement('div');
            string.className = "deco";
            string.id = "string" + ('G' + g + 'S' + i);
            six.append(string);
        } 
        $('#output').append(six);
    }
}

这将同时创建所有字符串组。可以很容易地为每个ID定义显式ID：strGiSj其中i是组，j是组中的字符串。

接下来，hideNode功能如何：

function hideNote(notes) {
    makeItHappen(Math.ceil(notes.length / 4));

    notes.forEach(function(n, i){
        var values = n.match(/s(\d)f(\d)/); // values[1] = string, values[2] = fret
        var parentEl = $("#stringG" + (Math.ceil((i + 0.5) / 4)) + "S" + values[1]);
        var child = $("<div></div>")
            .addClass("fret")
            .css("left", (10+ (i%4) * 25) + "px")
            .text(values[2]);

        parentEl.append(child)
    });
}

我们创建所需的组数量（注释量/ 4舍入到下一个int）。对于数组中的每个音符，我们使用正则表达式/s(\d)f(\d+)/检索字符串和音品：

\d匹配数字
\d+匹配一个或多个数字
括号允许轻松检索值

接下来，我们只需要检索相应的组，并检索关联的div好id，然后创建fret元素并放置它。

完整代码如下所示：

"use strict"

$(document).ready(function() {
    var notes = ['s6f1', 's5f5', 's4f7', 's3f6', 's2f5', 's1f3', 's6f8', 's5f1', 's4f6', 's3f1', 's2f3', 's1f3', 's6f9', 's5f17', 's4f19'];
    hideNote(notes);
});

function hideNote(notes) {

    makeItHappen(Math.ceil(notes.length / 4))

    notes.forEach(function(n, i){
      var values = n.match(/s(\d)f(\d+)/);
      var parentEl = $("#stringG" + (Math.ceil((i + 0.5) / 4)) + "S" + values[1]);
      var child = $("<div></div>")
        .addClass("fret")
        .css("left", (10+ (i%4) * 25) + "px")
        .text(values[2]);

      parentEl.append(child)
    })
}

function makeItHappen(nbGroup) {  
  for(var g = 1; g <= nbGroup; g++){
    var six = document.createElement('div');
    six.className = "six_line";
    for (var i = 6; i >= 1; i--) {
        var string = document.createElement('div');
        string.className = "deco";
        string.id = "string" + ('G' + g + 'S' + i);
        six.append(string);
    }
    $('#output').append(six);
  }
}

这是一个带有工作样本的codepen。

如何在动态创建的div上附加元素

1 个答案: