0

私が書いたいくつかの jQuery コードに問題があります。

Page 2の入力フィールドは、 Page 1の入力フィールドを削除するためのボタンによって削除されているようです。これを整理するにはどうすればよいですか？これが jsFiddleの私のコードです。ページ 2に新しい入力フィールドを追加してから、ページ 1の削除ボタンを使用してみてください。おかしなことに、逆には機能しないようです。これが私のコードです：

$(document).ready(function () {
    $('#add_roomFac').click(function () {
        var $objs = $('select[name*=roomFac]');
        var n = $objs.size() + 1;
        var $obj = $objs.first().clone();
        $obj.attr('name', 'roomFac' + n).attr('id', 'roomFac' + n);
        $obj.appendTo($('#search_fac'));
    });

    $('#remove_roomFac').click(function () {
        var $objs = $('select[name*=roomFac]');
        if ($objs.size() > 1) {
            $objs.last().remove();
        }
    });

    $('#addFac').click(function () {
        var $objs = $('select[name*=request_roomFac]');
        var n = $objs.size() + 1;
        var $obj = $objs.first().clone();
        $obj.attr('name', 'request_roomFac' + n).attr('id', 'research_roomFac' + n);
        $obj.appendTo($('#request_fac'));
    });
    $('#removeFac').click(function () {
        var $objs = $('select[name*=request_roomFac]');
        if ($objs.size() > 1) {
            $objs.last().remove();
        }
    });
});
4

3 に答える 3

3

('select[name*=roomFac]'); を使用する場合 含むセレクターを使用しているため、両方のドロップダウンを選択します。セレクターで始まる ('select[name^=roomFac]'); を使用してみてください。

[http://jsfiddle.net/eyecode/psL2s/2/][1]

于 2013-02-14T01:55:14.910 に答える
1

要素を適切にターゲットにするには、セレクターでより多くのコンテキストが必要です。

$('#remove_roomFac').click(function () {
    var $objs = $('#search_fac select[name*=roomFac]');
    if ($objs.size() > 1) {
        $objs.last().remove();
    }
});

/////////////////////////////////////////////////////

$('#removeFac').click(function () {
    var $objs = $('#request_fac select[name*=request_roomFac]');
    if ($objs.size() > 1) {
        $objs.last().remove();
    }
});

ここで働くフィドル

于 2013-02-14T01:55:49.890 に答える
0

クリックされた要素を基準にしてセレクターをスコープするには、ページごとに div が必要です。$(this) はクリックされたボタンで、.closest は上に移動して親ページを見つけ、下に戻ってそのページの選択ボックスを見つけます。

http://jsfiddle.net/psL2s/11/

$('#remove_roomFac').click(function () {
    var $objs = $(this).closest('.page').find('select[name*=roomFac] option');
    if ($objs.size() > 1) {
        $objs.last().remove();
    }
});

両方のボタンで機能するようにイベントを変更し、このクラスをボタンに配置できます。 $('.remove_option').click(function () {

これにより、JS で ID をハードコーディングする代わりに、要素にクラスを追加するだけで動作を作成できます。

于 2013-02-14T02:03:18.840 に答える