2

選択ボックスを使用して (数値選択に基づいて) div を複製し、新しい div の ID とラベルをインクリメントしています。私はこれを機能させていますが、2より大きい数値を選択すると、divが順番に増加しないという問題があります。2 を選択してから 3 を選択し、次に 4 などを選択すると実行されます。

基本的に、選択ボックスで 3 を選択した場合、結果は次のようになります。

大人会員プログラム#1 大人会員プログラム
#2 大人
会員プログラム #3

それよりも：

大人会員プログラム#1 大人会員プログラム
#3 大人
会員プログラム #2

これが私のJSです：

$(document).ready(function () {
    //onchange of rooms-count
    $('#num-adults').change(function() {
        var roomsSelected = $('#num-adults option:selected').val();
        var roomsDisplayed = $('[id^="program-"]:visible').length;
        var roomsRendered = $('[id^="program-"]').length;

        if (roomsSelected > 0) {
            $('.membership-programs.adult label').show();
        }
        else {
            $('.membership-programs.adult label').hide(); 
        }

        //if room count is greater than number displayed - add or show accordingly
        if (roomsSelected > roomsDisplayed) {
            for (var i=1;i<=roomsSelected;i++){
                var r = $('#program-' + i);
                if (r.length == 0) {
                    var clone = $('#program-1').clone(); //clone
                    clone.children(':first').text("Membership Program for Adult #"+i);

                    //change ids appropriately
                    setNewID(clone, i);
                    clone.children('div').children('select').each(function() {
                        setNewID($(this),i);
                    });
                    $(clone).insertAfter($('#program-'+roomsRendered));
                }
                else {
                    //if the room exists and is hidden 
                    $(r).show();
                }
            }
        }
        else {
            //else if less than room count selected - hide
            for (var i=++roomsSelected;i<=roomsRendered;i++){
                $('#program-'+i).hide();
            }
        }
    });

    function setNewID(elem, i) {
        oldID = elem.attr('id');
        newId = oldID.substring(0, oldID.indexOf('-')) + "-" + i;
        elem.attr('id',newId);
    }
});​

ここに私のHTMLがあります:

<div id="hotel-guests">
    <span class="wrapper">
        <label for="num-adults"># of Adults:</label>
        <select tabindex="4" name="amtrakadults" id="num-adults" class="traveler-dropdown">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
        </select>
    </span>    
</div>
<div class="membership-programs adult">
    <div id="program-1" class="program">
        <span>Membership Program for Adult #1:</span>
        <span class="wrapper">
            <select tabindex="4" name="program" class="membership-program">
                <option value="None">None</option>
                <option value="AAA">AAA</option>
                <option value="Student Advantage">Student Advantage</option>
                <option value="Veterans Advantage">Veterans Advantage</option>
                <option value="NARP">NARP</option>
                <option value="ISIC">ISIC</option>
            </select>
        </span>
    </div>
</div>​

ここに問題を表示するフィドルがあります。

4

2 に答える 2

2

これを変える：

$(clone).insertAfter($('#program-'+roomsRendered));

これに：

$(clone).appendTo('.membership-programs');

更新されたフィドル

于 2012-11-27T17:05:55.293 に答える
1

この行を置き換えます

$(clone).insertAfter($('#program-'+roomsRendered));

と

$('.adult').append($(clone));

フィドルをチェック

于 2012-11-27T17:09:15.693 に答える