Question

我想多次显示一个特定的div，具体取决于上一步中选中的复选框的数量。与this form中的步骤3.2类似。这样做的最佳方式是什么？

根据所选复选框的数量，我希望多次显示Div，其中h3（#tile_name）是复选框的值：

<div class="plan_select" id="border">
  <h3 id="tile_name">Tiles - Selected</h3>
  <div class='styled-select'>
    <select name='bankskivans'>
      <option value='Halvrund'>Halvrund</option>
      <option value='Helrund'>Helrund</option>
      <option value='Karnis helrund'>Karnis helrund</option>
      <option value='Nosformad'>Nosformad</option>
      <option value='Rak fasad'>Rak fasad</option>
      <option value='Rak rundad'>Rak rundad</option>
      <option value='Vattenfall'>Vattenfall</option>
    </select>
  </div>
</div>

JS小提琴https://jsfiddle.net/L7swuv8g/

JQuery代码：

$(document).ready(function() {
  var $measures = $('input.checkbox_plan');
  var $showmeasures = $('input[name="measures_show"]');
  var $border = $('div#border');

  $measures.hide();
  $border.hide();
  $showmeasures.on('click', function() {
    if ($(this).is(':checked')) {
      $measures.show();
      $border.show();
    } else {
      $measures.hide();
      $border.hide();
    }
  });
});

Answer 1

不确定你想要什么，但也许这适合你？

我做了这样，它将为每个选中的复选框创建模板内容的实例。（或者没有，如果没有选择的话。）

https://jsfiddle.net/d6k40wd0/2/

HTML：

<div id='template' style='display:none'>
  <div class='plan_select' id='border'>
    <h3 id='tile_name'>#title#</h3>
    <div class='styled-select'>
      <select name='bankskivans'>
        <option value='Halvrund'>Halvrund</option>
        <option value='Helrund'>Helrund</option>
        <option value='Karnis helrund'>Karnis helrund</option>
        <option value='Nosformad'>Nosformad</option>
        <option value='Rak fasad'>Rak fasad</option>
        <option value='Rak rundad'>Rak rundad</option>
        <option value='Vattenfall'>Vattenfall</option>
      </select>
    </div>
  </div>
</div>

<label for="a"><input type="checkbox" id="a" value="alpha" class="templateChoice" />Choose a.</label>
<label for="b"><input type="checkbox" id="b" value="bravo" class="templateChoice" />Choose b.</label>
<label for="c"><input type="checkbox" id="c" value="charlie" class="templateChoice" />Choose c.</label>
<label for="d"><input type="checkbox" id="d" value="delta" class="templateChoice" />Choose d.</label>
<br />
<button type="button" onclick="showResult();">Show result</button>
<hr />
<div id="result"></div>

JavaScript的：

function showResult() {
  var template = $("#template").html();
  $("#result").html("");
  $.each($(".templateChoice"), function(index, checkbox) {
    if (checkbox.checked) {
        var templateCopy = template.replace("#title#", "You selected " + checkbox.value);
        $("#result").html($("#result").html() + templateCopy);
    }
  });
}

Answer 2

jQuery很糟糕
您需要知道的只有两种方法：document.createElement（）和appendChild（）

见下面的代码：

    var node = document.createElement("DIV");
    node.style. ... = ... ; // you can create your own prototype of block

例如，如果你需要上课：

    node.setAttribute("class", "class_name second_class_name");

设置块的文本，然后通过方法将原型块复制到DOM中：

    node.innerHTML = "Text of block";
    document.getElementById("container_id").appendChild(node); //your container id

再次：

    node.innerHTML = "Text of second block";
    document.getElementById("container_id").appendChild(node);

因此，您可以根据需要显示

此致

显示具有不同标题的同一div的多个实例

2 个答案: