jquery - 複数のテキストボックスを動的に追加する際の問題

Question

インラインに「+」記号が隣接する2つのテキストボックスがあります。プラス記号をクリックすると、新しいテキストボックスが追加され、テキストボックスを追加および削除するための「+」記号と「-」記号がそれぞれ表示されます。このリソースを使用して、テキストボックスを実装しました。今、私はそれらのそれぞれに10個のテキストボックスだけを追加したいと思います。入力タグの名前からわかるように、keyword []の場合は10個のテキストボックス、link_name[]の場合は10個のテキストボックスを意味します。しかし、このコードでは機能しません。

キーワード[]のテキストボックスを追加し続けると、19個のテキストボックスが追加され、link_name []のテキストボックスを追加しようとすると、テキストボックスが1つも追加されず、到達した最大制限が表示されます。

加算がその逆の場合、正しく機能します。
また、別の問題は、バウンス効果が機能していないことです。エフェクトにあまり詳しくないため、エフェクトが機能しない理由を見つけることができません。

jQueryとHTMLを以下に示します。

jQuery

$(document).ready(function() {
    var id_1 = 2, max = 9, append_data;
    /*TEXT BOXES FOR LINK NAMES*/   
    /*If add_1 icon was clicked*/
    $("#add_1").live('click', function(){
        if($("div[id^='txt_']").length <9){ //Don't add new text box if limit is reached
            $(this).remove(); //remove add icon from the current text box
            var append_data = '<div id="txt_'+id_1+'" class="txt_div" style="display:none;"><div class="left"><input type="text" id="input_'+id_2+'" name="link_name[]"/></div><div class="right"><img src="add.png" id="add_1"/> <img src="remove.png" id="remove_1"/></div></div>';
            $("#textboxes_1").append(append_data); //append new text box in main div
            $("#txt_"+id_1).effect("bounce", { times:3 }, 300); //display block appended text box with silde down
            id_1++;
        }
        else{
            alert("Maximum 10 textboxes are allowed");  
        }
    })
    $("#remove_1").live('click',function(){
        var prev_obj = $(this).parents().eq(1).prev().attr('id'); //prev div id of this text_box
        $(this).parents().eq(1).slideUp('medium', function() { $(this).remove(); //remove this text box with a slide up
        if($("div[id^='txt_']").length >1){
            append_data = '<img src = "remove.png" id = "remove_1"/>';
        }
        else{
            append_data = '';
        }
        if($("#add_1").length< 1){
            $("#"+prev_obj+" .right").html('<img src = "add.png" id = "add_1"/>'+append_data);
        }
        });
    })

/*TEXT BOXES FOR KEYWORDS*/

    /*If add_2 icon was clicked*/
    var id_2 = 12, max = 19;
    $("#add_2").live('click', function(){
        if($("div[id^='txt_']").length <19){ //Don't add new text box if limit is reached
            $(this).remove(); //remove add icon from the current text box
            var append_data = '<div id="txt_'+id_2+'" class="txt_div" style="display:none;"><div class="left"><input type="text" id="input_'+id_2+'" name="keyword[]"/></div><div class="right"><img src="add.png" id="add_2"/> <img src="remove.png" id="remove_2"/></div></div>';
            $("#textboxes_2").append(append_data); //append new text box in main div
            $("#txt_"+id_2).effect("bounce", { times:3 }, 300); //display block appended text box with silde down
            id_2++;
        }
        else{
            alert("Maximum 10 textboxes are allowed");  
        }
    })
    $("#remove_2").live('click',function(){
        var prev_obj = $(this).parents().eq(1).prev().attr('id'); //prev div id of this text_box
        $(this).parents().eq(1).slideUp('medium', function() { $(this).remove(); //remove this text box with a slide up
        if($("div[id^='txt_']").length >1){
            append_data = '<img src = "remove.png" id = "remove_2"/>';
        }
        else{
            append_data = '';
        }
        if($("#add_2").length< 1){
            $("#"+prev_obj+" .right").html('<img src = "add.png" id = "add_2"/>'+append_data);
        }
        });
    })
});

HTML

<div id="textboxes_1" class="inline">
    <div id="text_1" class="text_div">
        <div class="left">
            <input type="text" id="input_1" value="Enter URL(s) here" name="link_name[]" />
        </div>
        <div class="right">
            <img src="add.png" id="add_1" />
        </div>
    </div>
</div>
<div id="textboxes_2" class="inline">
    <div id="text_11" class="text_div">
        <div class="left">
            <input type="text" id="input_11" value="Enter Keyword(s) here" name="keyword[]" />
        </div>
        <div class="right">
            <img src="add.png" id="add_2" />
        </div>
    </div>
</div>
<div style="clear:left;"></div>
<input type="submit" id="submit" name="submit" value="SUBMIT">

score 2 · Accepted Answer

OK、答えは簡単ですいくつかの論理的な間違いを犯しました。以下は、コメントで説明されているいくつかの修正を含むコードです。

$(document).ready(function() {
var id_1 = 2, max = 9, append_data;
/*TEXT BOXES FOR LINK NAMES*/   
/*If add_1 icon was clicked*/
$("#add_1").live('click', function(){
    if($("#textboxes_1 input").length <10){ //Don't add new text box if limit is reached
// Here You have to check #textboxes_1 for his own input's, and You have to give 10 not 9, becouse lenght is allways actual number of elements

        $(this).remove(); //remove add icon from the current text box
        var append_data = '<div id="txt_'+id_1+'" class="txt_div"><div class="left"><input type="text" id="input_'+id_1+'" name="link_name[]"/></div><div class="right"><img src="add.png" id="add_1"/> <img src="remove.png" id="remove_1"/></div></div>';
// in the code abowe You give id="input_'+id_2+'", I belive it should be id="input_'+id_1+'"
        $("#textboxes_1").append(append_data); //append new text box in main div
        $("#txt_"+id_1).effect("bounce", { times:3 }, 300); //display block appended text box with silde down
        id_1++;
    }
    else{
        alert("Maximum 10 textboxes are allowed");  
    }
})
$("#remove_1").live('click',function(){
    var prev_obj = $(this).parents().eq(1).prev().attr('id'); //prev div id of this text_box
    $(this).parents().eq(1).slideUp('medium', function() { $(this).remove(); //remove this text box with a slide up
    if($("div[id^='txt_']").length >1){
        append_data = '<img src = "remove.png" id = "remove_1"/>';
    }
    else{
        append_data = '';
    }
    if($("#add_1").length< 1){
        $("#"+prev_obj+" .right").html('<img src = "add.png" id = "add_1"/>'+append_data);
    }
    });
})

/*TEXT BOXES FOR KEYWORDS*/

/*If add_2 icon was clicked*/
var id_2 = 12, max = 19;
$("#add_2").live('click', function(){
    if($("#textboxes_2 input").length <20){ //Don't add new text box if limit is reached
// The same issue was here as well

        $(this).remove(); //remove add icon from the current text box
        var append_data = '<div id="txt_'+id_2+'" class="txt_div" ><div class="left"><input type="text" id="input_'+id_2+'" name="keyword[]"/></div><div class="right"><img src="add.png" id="add_2"/> <img src="remove.png" id="remove_2"/></div></div>';
        $("#textboxes_2").append(append_data); //append new text box in main div
        $("#txt_"+id_2).effect("bounce", { times:3 }, 300); //display block appended text box with silde down
        id_2++;
    }
    else{
        alert("Maximum 10 textboxes are allowed");  
    }
})
$("#remove_2").live('click',function(){
    var prev_obj = $(this).parents().eq(1).prev().attr('id'); //prev div id of this text_box
    $(this).parents().eq(1).slideUp('medium', function() { $(this).remove(); //remove this text box with a slide up
    if($("div[id^='txt_']").length >1){
        append_data = '<img src = "remove.png" id = "remove_2"/>';
    }
    else{
        append_data = '';
    }
    if($("#add_2").length< 1){
        $("#"+prev_obj+" .right").html('<img src = "add.png" id = "add_2"/>'+append_data);
    }
    });
})

});

jquery - 複数のテキストボックスを動的に追加する際の問題

1 に答える 1

Related

Reference