javascript - 使用独特的元素制作 div 的副本，并在单击时将每个元素移动到单独的 div

Question

我正在尝试使用一些独特的前置用户输入数据来制作 div 的副本，并将每个副本显示在新区域中。

例如:用户输入优惠券代码，单击按钮，一个隐藏的、预先格式化的响应会出现在 div 中及其优惠券代码。我想确保将带有独特优惠券的全新预格式化响应添加到 div 中。

到目前为止，我所拥有的是附加新响应，但每个新优惠券代码将添加到单个克隆响应 div，而不是新响应 div。我知道有一种更好的方法可以做到这一点，而且也有效。

那么如何让 单独的条目出现在 promo-applied-div 中，每个条目都有用户输入的唯一促销代码？

标记

  <input class="apply-promo-form" type="text">
  <button class="button">Click</button><br> 

  <div class="promo-applied-area">
    <!-- the promo applied div is revealed here on click -->
  </div>

  <div class="promo-info-div"> 
  <!-- the user's coupon code goes here --> <a class="view-details" href="#">view details</a> <span class="close">x</span>
  </div>

CSS

.promo-applied-area {
  height: 100px;
  padding: 5px;
  background: lightblue;
}
.promo-info-div {
  display: none;
  background: lightgreen;
}
.close {
  cursor:pointer;
  padding: 10px;
} 

jQuery

$(function(){ 
  var pushIt = $('.promo-info-div');
  $('.button').click(function(){
    couponCode = $('.apply-promo-form').val();
    $('.promo-info-div').css('display','block');
    $('.promo-info-div').prepend(couponCode).clone();
    $('.promo-applied-area').prepend(pushIt);
    $('.apply-promo-form').val('');
  });

  $('.close').click(function(){
    $('.promo-info-div').slideUp();
  });
});   

<强> Here's my Fiddle

Answer 1

您的标记存在一些问题:

1. 在适当的时候使用id。您在任何地方都使用 class 。这是一个问题，因为如果有多个具有相同类的元素，您的语句如 $('.apply-promo-form').val() 将拾取第一个 jQuery 对象。当您需要对元素进行样式设置和分组时，请使用class。当您必须唯一限定和元素时，请使用 id。
2. 尽可能使用模板。
3. 您将在前面添加优惠券代码，然后对其进行.clone，但不会在任何地方使用克隆的对象。无论如何，这不是必需的。
4. pushIt = $('.promo-info-div') 然后再$('.promo-applied-area').prepend(pushIt)？前置同一组元素？

这是一个非常粗略的示例，您可以从以下开始:

$('.button').click(function () {
    var couponCode, templateHtml, $template, $span;

    template = $('#template').html(); // get the html out of template
    $template = $(template);          // convert that to a jQuery object
    $span = $("<span>");              // create a span to hold the coupon code
  
    couponCode = $('#apply-promo-form').val();  // get value of input into couponCode
  
    $span.text(couponCode);    // Add the couponCode text to the span
    $template.prepend($span);  // Prepend the span to the templated object
  
    // prepend the templated object to the area and show it
    $template.prependTo("#promo-applied-area").slideDown();
  
    // clear the form
    $('#apply-promo-form').val('');
});


// Event delegation required here, 
// because these are newly created elements
$('#promo-applied-area').on("click", ".close", function () {
    $(this).parent().fadeOut(function() { 
        $(this).remove(); // Remove from DOM, no use for lingering objects
    }) 
});

#promo-applied-area { height: 100px; padding: 5px; background: lightblue; }
.promo-info-div { display: none; background: lightgreen; }
.close { cursor:pointer; padding: 0 10px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="apply-promo-form" type="text">
<button class="button">Click</button><br/><br/>
<div id="promo-applied-area"></div>

<!-- This is defining a template -->
<script id="template" type="text/template">
    <div class="promo-info-div">
        <a class="view-details" href="#">View detail</a>
        <span class="close">x</span>
    </div>
</script>