动态显示动态添加的html

Question

我无法在任何地方找到此解决方案。

用户进行选择并输入一些值。当他点击添加时，我想要添加jQuery的html动画（或向下滑动）到视图中。元素高度将如何检索以设置值？

这是父母;

<div class="order-summary-wrap"></div> 

此代码的工作原理，但它是震撼。

// build the summary boxes from the users inputs 
function create_summary(){ 
    var summary_html = ''; 

    if($('.cycle-01').hasClass('cycle-slide-active')){ 
     summary_html = '<div class="toll-free-summary-contents remove-me"><p class="line-one"><span class="new-toll-free-number">' + $('.cycle-01 .step-2-container .number').find("option:selected").attr("value") + '</span> in <span class="from-toll-free-country">' + $('.cycle-01 .step-1-container .country').find("option:selected").attr("value") + '</span> will ring to <span class="forward-to-number">' + $('.cycle-01 .step-3-container .country').find("option:selected").attr("value") + '</span> in <span class="to-toll-free-country">' + $('.cycle-01 .step-4-container #ForwardNumberTo').attr("value") + '</span></p><p class="line-two"><span class="toll-free-cost">' + $('.billing-options-hidden').find("option:selected").attr("value") + '</span> (FIRST MONTH FREE) with each minute used costing <span class="toll-free-per-minute-cost">' + $('.per-minute').text() + '</span></p><div class="remove"><a class="remove-link" href="#">Remove</a><a class="view-link" href="#">View Sample Bill</a></div></div>'; 
    } else { 
     summary_html = '<div class="local-summary-contents remove-me"><p class="line-one"><span class="country-local-number">' + $('.cycle-02 .step-1-container .country').find("option:selected").attr("value") + '</span> <span class="state-local-number">' + $('.cycle-02 .step-2-container .state').find("option:selected").attr("value") + '</span> <span class="city-local-number">' + $('.cycle-02 .step-3-container .city').find("option:selected").attr("value") + '</span> <span class="new-local-number">' + $('.cycle-02 .step-4-container .local').find("option:selected").attr("value") + '</span></p><p class="line-two"><span class="toll-free-cost">' + $('.billing-options-hidden').find("option:selected").attr("value") + '</span> (FIRST MONTH FREE) with each minute used costing <span class="toll-free-per-minute-cost">' + $('.per-minute').text() + '</span></p><div class="remove"><a class="remove-link" href="#">Remove</a><a class="view-link" href="#">View Sample Bill</a></div></div>'; 
    } 

    $('.order-summary-wrap').append(summary_html); 
    $('.add-more-numbers').removeClass('hidden'); 
} 

// click event to dynamically add the summary boxes to the DOM 
$('.first-step, .add-number').click(function(e){ 
    create_summary(); 
}); 

另外，点击“删除”链接时，我想的，因为它是从DOM中删除的元素的动画。

// lets the user remove the number from the DOM 
$('.order-summary-wrap').on('click', '.remove-link', function(e) { 
    e.preventDefault(); 
    $(this).parent().parent().remove(); 
}); 

Answer 1

如果这是您想要滑动的新的summary_html，您可以这样做。在追加DOM元素之前隐藏DOM元素，然后使用.slideDown()使其在附加后可见。

这里的工作演示（用简单的代码来说明）：http://jsfiddle.net/jfriend00/gHcZJ/

而且，这里是与实现代码：

// build the summary boxes from the users inputs 
function create_summary(){ 
    var summary_html = ''; 

    if($('.cycle-01').hasClass('cycle-slide-active')){ 
     summary_html = $('<div class="toll-free-summary-contents remove-me"><p class="line-one"><span class="new-toll-free-number">' + $('.cycle-01 .step-2-container .number').find("option:selected").attr("value") + '</span> in <span class="from-toll-free-country">' + $('.cycle-01 .step-1-container .country').find("option:selected").attr("value") + '</span> will ring to <span class="forward-to-number">' + $('.cycle-01 .step-3-container .country').find("option:selected").attr("value") + '</span> in <span class="to-toll-free-country">' + $('.cycle-01 .step-4-container #ForwardNumberTo').attr("value") + '</span></p><p class="line-two"><span class="toll-free-cost">' + $('.billing-options-hidden').find("option:selected").attr("value") + '</span> (FIRST MONTH FREE) with each minute used costing <span class="toll-free-per-minute-cost">' + $('.per-minute').text() + '</span></p><div class="remove"><a class="remove-link" href="#">Remove</a><a class="view-link" href="#">View Sample Bill</a></div></div>'); 
    } else { 
     summary_html = $('<div class="local-summary-contents remove-me"><p class="line-one"><span class="country-local-number">' + $('.cycle-02 .step-1-container .country').find("option:selected").attr("value") + '</span> <span class="state-local-number">' + $('.cycle-02 .step-2-container .state').find("option:selected").attr("value") + '</span> <span class="city-local-number">' + $('.cycle-02 .step-3-container .city').find("option:selected").attr("value") + '</span> <span class="new-local-number">' + $('.cycle-02 .step-4-container .local').find("option:selected").attr("value") + '</span></p><p class="line-two"><span class="toll-free-cost">' + $('.billing-options-hidden').find("option:selected").attr("value") + '</span> (FIRST MONTH FREE) with each minute used costing <span class="toll-free-per-minute-cost">' + $('.per-minute').text() + '</span></p><div class="remove"><a class="remove-link" href="#">Remove</a><a class="view-link" href="#">View Sample Bill</a></div></div>'); 
    } 
    summary_html.hide(); 
    $('.order-summary-wrap').append(summary_html); 
    summary_html.slideDown(); 
} 

// click event to dynamically add the summary boxes to the DOM 
$('.first-step, .add-number').click(function(e){ 
    create_summary(); 
}); 

Answer 2

jfriend00打我给它。你可以做同样的从DOM中删除号码。

$('.order-summary-wrap').on('click', '.remove-link', function(e) { 
    e.preventDefault(); 
    $(this).parent().parent().slideUp().remove(); 
});