wyświetlanie wielu wystąpień tego samego elementu div o innym tytule

Question

Chciałbym wyświetlić dany element div kilka razy w zależności od liczby pól wyboru zaznaczonych w poprzednim kroku. Podobne do kroku 3.2 w this form. Jaki jest najlepszy sposób na zrobienie tego?

Div, że chcę być wyświetlany wielokrotnie w zależności od liczby wyboru zaznaczone, gdzie h3 (#tile_name) jest wartością pola wyboru:

<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 Fiddle https://jsfiddle.net/L7swuv8g/

kod jQuery:

Answer 1

Nie wiem dokładnie, co chcesz, ale może to działa dla Ciebie?

Zrobiłem to, aby utworzyć instancję treści szablonu dla każdego zaznaczonego pola wyboru. (albo żadna, jeśli nie jest zaznaczona.)

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

1. jQuery jest do bani
2. Wszystko, co musisz wiedzieć to 2 metody: document.createElement() an d appendChild()

patrz kod poniżej:

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

Na przykład jeśli trzeba Klasa:

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

tekst zestaw bloku, a potem po prostu skopiować swój prototyp bloku do DOM według metody:

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

I znowu:

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

Tak, można wyświetlić tyle razy, ile trzeba

Pozdrowienia