Question

所以基本上我身上有这个div

＆＃13;

<body>
  <div id="main_content"></div>
</body>

＆＃13;

现在我从互联网上下载一些数据（一组布尔数据），我有这个div模板。让我们说数据是（真，假，真）。然后对于每个数据我想要改变模板div。例如：第一个是真的，所以在模板div中我将 sub1 div 高度更改为40 px;如果它是假的，我将 sub2 div 高度改为40 px;然后我将此修改后的模板div附加到 main_content div

模板div：

＆＃13;
＆＃13;
.child{ width:300px; height:auto; } .sub1{ width:300px; height:20px; background-color:#0FF; } .sub2{ width:300px; height:20px; background-color:#F0F; }
＆＃13;
<div class="child"> <div class="sub1"></div> <div class="sub2"></div> </div>
＆＃13;
＆＃13;
＆＃13;

毕竟这应该是 main_content div
的最终输出

使用 HTML / CSS / JS 执行此操作的最简单方法是什么。

由于

Answer 1

简答：这是codepen

答案很长：我会用js动态生成你的模板div：

function makeTemplateDiv() {
  var child = document.createElement('div');
  child.className = "child"
  var sub1 = document.createElement('div');
  sub1.className = "sub1"
  var sub2 = document.createElement('div');
  sub2.className = "sub2"
  child.appendChild(sub1);
  child.appendChild(sub2);
  return child;
}

然后为更高的40 px

制作一个css类

.taller {
  height: 40px;
}

然后使用js根据传入的值

更改模板

function alterTemplateDiv(value) {
  var template = makeTemplateDiv();
  if(value) {
    template.getElementsByClassName("sub1")[0].className += " taller";
  } else {
    template.getElementsByClassName("sub2")[0].className += " taller";
  }
  return template;
}

然后使用js传入你的数组，制作div，然后追加它们

function appendDivs(arrayOfValues) {
  var mainDiv = document.getElementById("main_content");
  for(var i = 0; i < arrayOfValues.length; i++) {
    mainDiv.appendChild(alterTemplateDiv(arrayOfValues[i]));
  }
}

Answer 2

这类问题引发了一百万种不同类型的答案，但我认为这通常与前端编码的大多数最佳实践保持一致，而不使用框架：

// Self-invoking function for scoping
// and to protect important global variables from other script changes
// (The variable references can be overwritten)
(function (window, document) {
 
    var templateText,
        generatedEl,
        topEl,
        bitArray;

    // Data
    bitArray = [true, false, true];

    // Get template text
    templateText = document.getElementById('my-template').text.trim();

    // Loop through your T / F array
    for (var i = 0, l = bitArray.length; i < l; i++) {

        // Create a DIV and generate HTML within it
        generatedEl = document.createElement('div');
        generatedEl.innerHTML = templateText;

        // Modify the new HTML content
        topEl = generatedEl.getElementsByClassName('child')[0];
        topEl.className += bitArray[i] ? ' typeA' : ' typeB' ;

        // Insert generated HTML (assumes only one top-level element exists)
        document.getElementById('my-container').appendChild(generatedEl.childNodes[0]);   	
    }

})(window, document);

.child {
  width: 300px;
  height: auto;
}

/* For true */
.child.typeA > .sub1 {
  width: 300px;
  height: 40px;
  background-color: #0FF;
}

.child.typeA > .sub2 {
  width: 300px;
  height: 20px;
  background-color: #F0F;
}

/* For false */
.child.typeB > .sub1 {
  width: 300px;
  height: 20px;
  background-color: #0FF;
}

.child.typeB > .sub2 {
  width: 300px;
  height: 40px;
  background-color: #F0F;
}

<!-- Container -->
<div id="my-container">
    
    <!-- HTML Template -->
    <script id="my-template" type="text/template">
        <div class="child">
            <div class="sub1"></div>
            <div class="sub2"></div>
        </div>
    </script>
    
</div>

请注意，HTML内容，JavaScript代码和CSS都保持非常分离。这是基于“关注点分离”和“不引人注目的JavaScript”的概念。如果你还没有，我邀请你阅读它们。此外，前端模板可以用于动态内容，就像我在这里做的那样，但我建议你尽可能在后端进行模板化。它更适合SEO目的。

Answer 3

jQuery使操作DOM变得更容易，因此问题another solution为np.mgrid：

var data = [true, false, true];

for (i=0; i<data.length; i++) {

    var height1;
    var height2;
    if (data[i] == true) {
        height1 = 40;
        height2 = 20;
    }
    else {
        height1 = 20;
        height2 = 40;
    }

    var div1 = document.createElement("div");
    $(div1).toggleClass("sub1")
        .height(height1)
        .appendTo("#main_content");

    var div2 = document.createElement("div");
    $(div2).toggleClass("sub2")
        .height(height2)
        .appendTo("#main_content");
}

动态更改div的内容并附加到另一个div

3 个答案: