JQuery clone / remove - добавление элементов для вывода

У меня есть функция clone / remove на div и его элементах. Эта часть работает нормально, но у меня есть кнопка генерации кода, и мне нужно вывести содержимое новых клонированных элементов, когда они сгенерированы.

На данный момент у меня есть текущий javascript для вывода исходных элементов div на странице, но мне интересно, есть ли способ добавить вывод на лету на основе того, был ли div клонирован или удален.

var cloneIndex = $(".clonedInput").length;

function clone() {
  $(this).parents(".clonedInput").clone()
    .appendTo("body")
    .attr("id", "clonedInput" + cloneIndex)
    .on('click', 'button.clone', clone)
    .on('click', 'button.remove', remove);
  cloneIndex++;
}

function remove() {
  $(this).parents(".clonedInput").remove();
}

$("button.clone").on("click", clone);
$("button.remove").on("click", remove);

/*generate the code*/
function myFunction() {

  var quote = '"';

  var mobile_start = "<pre>&lt;div class=" + quote + "show-for-small-only" + quote + "&gt;</pre>";
  var inner_style = "<pre>&lt;hr style=" + quote + "color:#EEECE8; margin-left: 5px; margin-right: 5px;" + quote + "/&gt;</pre>";
  var mobile_title = document.getElementById("title_text").value;
  var headline = "<pre>&lt;p class=" + quote + "text-center" + quote + " style=" + quote + "background-color:" + document.getElementById("name_text").value + "; color: white; font-size:45px; font-family:din-bold; padding-top:15px; padding-bottom: 10px;" + quote + "&gt;</pre>" + mobile_title + "<pre>&lt;/p&gt;</pre>";
  var mobile_end = "<pre>&lt;/div&gt;</pre>";

  document.getElementById("top").innerHTML = mobile_start + inner_style + mobile_title + headline + mobile_end + "<br /><br />";

}
body {
  padding: 10px;
}

.clonedInput {
  width: 50%;
  padding: 10px;
  border-radius: 5px;
  background-color: #def;
  margin-bottom: 10px;
}

.clonedInput div {
  margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clonedInput" class="clonedInput">
  <div>
    <fieldset>
      <legend>Product </legend>
      <label for="name">Title:</label>
      <input type="text" id="title_text" />
      <label for="mail">Product Name:</label>
      <input type="text" id="name_text" />
    </fieldset>
  </div>
  <div class="actions">
    <button class="clone">Clone</button>
    <button class="remove">Remove</button>
  </div>
</div>
<button onClick="myFunction()">Generate Code</button>
<p id="top" style="font-family:Arial; font-size: 18px;"></p>

javascript,jquery,

0

Ответов: 1

0

Используйте имена классов вместо идентификаторов для полей. Когда вы генерируете выходные данные, перебирайте их clonedInputи выбираете поля в своих дочерних элементах, например:

function myFunction() {
    var code = "";
    $(".clonedInput").each(function() {
        var title=$(this).find(".title_text").val(),
            productName=$(this).find(".name_text").val();
        code += ....... //append the code for each element
    });
    $("#top").html(code);
}

Совет. Используйте правильные, описательные имена для ваших функций, переменных и имен элементов.

JavaScript, JQuery,
Похожие вопросы
Яндекс.Метрика