1

jQueryセレクターを使用して、動的に生成されたHTMLセルを表示および再表示しています。しかし、私は正しいセレクターを選択しなかったようです。だから、私にいくつかの提案をしていただければ幸いです。

ウェブページ：

  1. まず、ユーザーにアプリケーションの数を選択するように依頼します
  2. ユーザーの選択に基づいて、アプリケーションごとに「アプリケーションのタイミング」と「アプリケーションの日付」の2つの入力フィールドを生成します。
  3. 「申請時期」には2つの選択肢があります。ユーザーが「デフォルト」を選択すると、「申請日」は消えます。

問題：3つ以上の申請がある場合、どこで選択しても、最後の「申請日」のみが表示されなくなります。正しいセレクターを使わなかったからだと思います。

デモ

HTMLコード

<table class="table">
    <tr>
        <th>
            <label for="id_NOA">Number of applications:</label>
        </th>
        <td>
            <select id="id_NOA" class="valid" name="NOA">
                <option selected="selected" value="">Choose</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
        </td>
    </tr>
</table>

JavaScript

$(document).ready(function() {
    $('#id_NOA').change(function() {

        var total = $(this).val();
        $('.app_timing').remove();
        $('.app_dates').remove();

        for (var i = 1; i <= total; i++) {

            $('<tr class="app_timing"><th><label for="id_Apt' + i + '">Application timing ' + i + ':</label></th><td><select name="Apt' + i + '" id="id_Apt' + i + '"><option value="" selected="selected">Select an application timing</option><option value="1">Default</option><option value="2">Enter your own</option></select></td></tr>').appendTo('.table')

            $('<tr class="app_dates"><th><label for="id_Date_apt">Application Date ' + i + ':</label></th><td><input readonly="readonly" type="text" name="Date_apt' + i + '" value="MM/DD" id="id_Date_apt' + i + '"/><td></tr>').appendTo('.table')

            $('.app_timing:last').find('select').bind('change', function() {
                if ($(this).val() == '1') {
                    $('.app_dates:last').hide()
                //$('#id_Date_apt' + i).hide() //I tried to use ID selector, but it does not work 
                }

            })
        }
    })


})​
4

4 に答える 4

4 
$('.app_dates:last').hide()

上記の行はハンドラー内にあり、changeハンドラーが起動するまで実行されません。起動時に、これは最後の要素を取得します。これにより、観察した動作が発生します。以下を使用できます。

$(this).closest("tr").next().hide()

これは現在のhtmlに基づいていることに注意してください。変更するには、これを変更する必要があります。テーブルの次の行を非表示にするだけです。

編集：

上記は質問に答えますが、全体的に優れたアプローチは、イベント委任を使用することです。これにより、ドロップダウンが変更されるたびに新しいハンドラーを作成するのではなく、単一のハンドラーをアタッチできます。（セレクターを簡略化するために、各選択にクラスを追加したことに注意してください）

$(".table").on("change",".timeSel",function(){
    var $this = $(this);

    if ($this.val() == '1') {
        $(this).closest("tr").next().hide();
    }
});

http://jsfiddle.net/JDFcn/11/

于 2012-09-10T21:13:49.370 に答える
3

交換

$('.app_dates:last').hide()

と

$(this).closest('.app_timing').next().hide()

:lastまたはi、forループ全体が繰り返された後にイベントが発生するため、wontは機能しません。

于 2012-09-10T21:11:18.590 に答える
2

試す：

$('.app_timing:last').find('select').on('change', function() {
    if ($(this).val() == '1') {
        $(this).parents('tr').next('.app_dates').remove();
    }
})

jsFiddleの例

これにより、「デフォルト」に変更した行の下の行が削除されます。DOMを上に移動してから、再び下に移動して、削除する行を見つけます。

于 2012-09-10T21:13:20.033 に答える
0

関数が呼び出されると、上部のドロップダウンで選択した数値よりも1大きく増えたままになっている変数iにアクセスしようとするため、それを使用することはできません。セレクターは何も返しません。

匿名関数で利用できるこのidプロパティからiの値を引き出すことをお勧めします。

多分このようなもの：

var idx = this.id.substring(6);   // You may want something fancier here
$('#app_dates' + idx).hide();

jsFiddleでその変更を行うと、最初の変更を非表示にすることができます。

于 2012-09-10T21:22:18.747 に答える