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

只需更改附加的位置即可。您需要附加整行代码，而不仅仅是优惠券代码。

样本 http://jsfiddle.net/dkanup2n/6/

$(".button").on("click", function() {
var code = $('.apply-promo-form').val();
var info = $('.promo-info-div');
info.append('<a class="view-details" href="#">view details</a>'+code+'<span   class="close">x</span>');
});

Answer 2

标记中存在一些问题：

在适当的时候使用id。您在任何地方都使用class。这是一个问题，因为如果有多个具有相同类的元素，那么像$('.apply-promo-form').val()这样的语句将会获取第一个jQuery对象。需要对元素进行样式化和分组时，请使用class。必须具有唯一限定资格和元素时，请使用id。
尽可能使用模板。
您在 couponCode 之前，然后.clone，但不在任何地方使用克隆对象。无论如何，这不是必需的。
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>

Answer 3

你需要做更多这样的事情才能使订单正确：

$（＆＃39; .promo施加区域＆＃39）。在前面加上（pushIt.clone（）前置（COUPONCODE））;

并删除＆＃34; $（＆＃39; .promo-applied-div＆＃39;）。prepend（couponCode）;＆＃34;线。

- 编辑 -

另外，您可以在clone（）之后执行CSS，这样您就不会在底部显示该行：

$（＆＃39; .promo-applied-area＆＃39;）。prepend（pushIt.clone（）。css（＆＃39; display＆＃39;，＆＃39; block＆＃39;）。prepend （COUPONCODE））;

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

3 个答案: