javascript - 动态添加带有jquery错误的元素

Question

这是我的 fiddle :DEMO

根据数据 JSON，有 2 个“组”。 每组各有 2 个“小部件”。 每个小部件都有特定的“控件”

飞利浦 widget 可以有灯光/亮度/颜色控件。它们分别与开关/ slider /颜色选择器相关联。

  for (var k = 0; k < data.groups[i].widgets[j].controls.length; k++) {

    $("." + data.groups[i].name + " > .widgets-container > ." + data.groups[i].widgets[j].name + " > .widget-header > .widget-label > .row > .brandName").text(data.groups[i].widgets[j].brandName);

    $("." + data.groups[i].name + " > .widgets-container > ." + data.groups[i].widgets[j].name + " > .widget-header > .widget-label > .row > .productName").text(data.groups[i].widgets[j].productName);

    var controlDiv;
    if (data.groups[i].widgets[j].controls[k].type === "SWITCH") {
      controlDiv = lightControl();
    } else if (data.groups[i].widgets[j].controls[k].type === "SLIDER") {
      controlDiv = brightnessControl();
    } else if (data.groups[i].widgets[j].controls[k].type === "PICKER") {
      controlDiv = colorControl();
    }

    controlDiv = $(controlDiv).addClass(data.groups[i].widgets[j].controls[k].name);

    $("." + data.groups[i].widgets[j].controls[k].name > ".control-name").text(data.groups[i].widgets[j].controls[k].name);

    $("." + data.groups[i].name + " > .widgets-container").append(widgetDiv);
    $(widgetDiv).append(controlDiv);
    $(".container-box").append(groupDiv);
  }

但是，元素没有按照 JSON 的要求附加。此外，不会出现用于亮度/亮度/颜色控制的标签。我哪里错了？

任何帮助将不胜感激。 谢谢。

Answer 1

这是 fiddle 的答案:AnswerFiddle

我通过首先创建 DOM 元素然后为 DOM 元素分配/附加值来解决这个问题。

之前有一个问题，因为有时甚至在创建 DOM 元素之前就会尝试分配值。

    controlDiv = $(controlDiv).addClass("row " + (data.groups[i].widgets[j].controls[k].name).replace(/\s+/g, '-').toLowerCase()).prepend("<div class='col s7 controlName'>" + data.groups[i].widgets[j].controls[k].name + "</div>");

    if (data.groups[i].widgets[j].controls[k].type === 'SWITCH') {
      $(controlDiv).append('<div class="col s5 switch"><label>OFF<input type= "checkbox"><span class="lever"></span>ON</label></div>')
    } else if (data.groups[i].widgets[j].controls[k].type === 'SLIDER') {
      $(controlDiv).append('<div class="col s5 center-align"><img src="images/brightness.png"></div><p class="col s7 range-field"><input type="range" min = "0" max = "100"/></p><div class="col s5 brightness-percentage center-align">60%</div>')
    } else if (data.groups[i].widgets[j].controls[k].type === 'PICKER') {
      $(controlDiv).append('<input class="col s2" type="color" name="favcolor" value="#ff0000"><div class="col s3 colorHexValue center-align">#ff0000</div>')

    } else if (data.groups[i].widgets[j].controls[k].type === 'GRAPH') {
      $(controlDiv).html("<img src='images/graph.png'>");
    } else if (data.groups[i].widgets[j].controls[k].type === 'DETECTOR') {
      $(controlDiv).html("<img src='images/motion.png'>")
    }


    widgetDiv.append(controlDiv);
    groupDiv.append(widgetDiv);
    $(".container-box").append(groupDiv);