1

私はどこにもこの解決策を見つけることができませんでした。

ユーザーは選択を行い、いくつかの値を入力します。彼がクリックして追加するとき、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();
});
4

2 に答える 2

1

下にスライドしたいのが新しいsummary_htmlの場合は、次のようにすることができます。追加する前に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();
});
于 2013-03-19T00:26:03.310 に答える
0

jfriend00は私をそれに打ち負かしました。DOMから番号を削除する場合も同じことができます。

$('.order-summary-wrap').on('click', '.remove-link', function(e) {
    e.preventDefault();
    $(this).parent().parent().slideUp().remove();
});
于 2013-03-19T00:29:02.773 に答える