0

JQuery の toggle() 関数を使用して、ユーザーがフォーム内の選択ボックスに新しい値を動的に追加できるようにしています。

ユーザーが [追加] をクリックすると、入力ボックスを含む DIV が表示され、[追加] テキストが [削除] に変更されます。

ユーザーが「追加」をクリックし、新しい入力ボックスにテキストを入力してから「削除」をクリックした場合、入力ボックスをクリアしたいと思います。

ここですべてが機能しますが、ユーザーが「削除」を切り替えた場合に、新しく作成された入力ボックスのフォーム値をリセットする方法がわかりません

これが私のコードです

$(".newName").click(function(){
    var frm = $(this).closest("form"); 

    $(".newContainer", frm).toggle(); // toggles the newContainer to show or hide
    $(this).text($(this).text() == 'Add' ? 'Remove' : 'Add'); // changes our text 
    $("#nameList", frm).prop('disabled', $(this).text() != 'Add') // disables the original list if we are adding a new one

});

<div class="names">
    <form id="newForm">
        <select id="nameList"></select>
        <p><a href="#" class="newName">Add</a></p>
        <div class="newContainer">
            <input type="text" id="theNewName" />
        </div>
    </form>
</div>
4

2 に答える 2

1 
$(".newName").click(function(){
    var frm = $(this).closest("form"); 

    $(".newContainer", frm).toggle(); // toggles the newContainer to show or hide
    if($(this).text() == 'Remove'){$("#nameList", frm).val('');}
    $(this).text($(this).text() == 'Add' ? 'Remove' : 'Add'); // changes our text 

    $("#nameList", frm).prop('disabled', $(this).text() != 'Add') // disables the original list if we are adding a new one

});

テキスト (「追加」/「削除」) の変更 + 最適化が心配な場合:

<a href="#" class="newName add" data-add-text="Add" data-remove-text="Remove">
Add
</a>


$('body').on('click',".newName",function(){
    var frm = $(this).closest("form"); 
    $(".newContainer", frm).toggle();
    $("#nameList", frm).val('').prop('disabled', $(this).hasClass('remove'));
    var newText = $(this).hasClass('remove')?
        $(this).data('addText'):$(this).data('removeText');
    $(this).text(newText).toggleClass('add remove');
});
于 2012-07-19T00:59:01.550 に答える
0 
$(".newName").click(function(){
    var frm = $(this).closest("form");

    $(".newContainer", frm).toggle(); // toggles the newContainer to show or hide
    $(this).text($(this).text() == 'Add' ? 'Remove' : 'Add'); // changes our text
    if($(this).text() == 'Remove' )
    {
    $("#theNewName",frm).val('');
    }
    $("#nameList", frm).prop('disabled', $(this).text() != 'Add') // disables the original list if we are adding a new one

});

ここでデモを参照してください: http://jsfiddle.net/

于 2012-07-19T01:00:55.747 に答える