Question

我有以下代码创建带有一些输入字段的新跨度：

function add_course() {
     var newspan = document.createElement('span');
     newspan.innerHTML = 'Degree: <input type="text" name = "degree[]"> Course: <input type="text" name = "course[]">';
     document.getElementById('degree_course').appendChild(newspan); 
}

function add_skill() {
     var newspan = document.createElement('span');
     newspan.innerHTML = 'Skill: <input type="text" name = "skill[]"> Level: <input type="number"min ="1" max = "5" name = "level[]">';
     document.getElementById('skills').appendChild(newspan); 
}

我希望这些跨度每个都有不同的ID。例如，在add_course的情况下，如果3跨越生成的位置，我希望它们具有ID：course_1，course_2，course_3（skill_1，skill_2，技能案例中的skill_3）。

我知道我必须在innerHTML中输入id =“course_VAR”并创建一个我每次都会增加的var。（不会有 for cicle，因为当我按下特定按钮时会触发该功能。）

<input class="buttons" type="button" id="more_fields" onclick="add_course();" value="Add Course" />

我的问题是，如何在没有 for 循环的情况下获取id中的var并使其增加？

Answer 1

将你的var放在函数范围之外并将其增加。

var idCounter = 0;

function add_course() {
  var newspan = document.createElement('span');
  newspan.id = 'course_' + idCounter++;
  newspan.innerHTML = 'Degree: <input type="text" name = "degree[]"> Course: <input type="text" name = "course[]">';
  document.getElementById('degree_course').appendChild(newspan)
}

Answer 2

您需要做什么添加一个计数器，然后使用functionFromAJS()

setAttribute

Answer 3

使用全局或外部范围变量来跟踪这一点并没有任何内在错误，正如其他一些答案中所建议的那样。但作为替代方案，如果你想保持“整洁”，你可以这样做：

var getIdFactory = function(pref) {
    return {
        counter: 0,
        prefix: pref,
        next: function() {
          this.counter++;
          return this.prefix+'_'+this.counter;
        }
    }
}

var courseId = getIdFactory('course');
var skillId = getIdFactory('skill');

然后，只要您需要新的div ID，请致电（例如）courseId.next()。

function add_course() {
    var newspan = document.createElement('span');
    newspan.innerHTML = 'Degree: <input type="text" name = "degree[]"> Course: <input type="text" name = "course[]">';
    newspan.setAttribute('id', courseId.next());
    document.getElementById('degree_course').appendChild(newspan);
}

在这里的例子中，这可能是过度的。但是这里的一个优点是你的id生成逻辑可以像你需要的那样复杂，因为它是自包含的。

JSfiddle here。

使用JavaScript生成带有id的跨度

3 个答案: