動態顯示動態添加的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(); 
});