有兩個內聯的文本框,在它們旁邊有一個「+」號。 單擊加號後,會添加一個新的文本框,它將分別帶有「+」和「 - 」號以便分別添加和刪除文本框 。我使用this資源來實現我的文本框。 現在,我只想爲每個文本框添加10個文本框。意思是10 用於關鍵字[]的文本框和用於link_name []的10個文本框,因爲您可以在輸入標籤的名稱中看到 。但是這個代碼不起作用。動態添加多個文本框的問題
如果我繼續添加文本框爲[],然後19文本框 相加,然後,如果我嘗試添加一個文本框LINK_NAME []那麼它 不添加一個文本框,並顯示關鍵字達到的最大限制。
如果增加反之亦然,它可以正常工作。
- 另一個問題是反彈效應不起作用。沒有太多 熟悉的影響,所以無法找到它不是 工作的原因。
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">
爲您需要的彈跳效果http://gsgd.co.uk/sandbox/jquery/easing/ – 2013-02-18 06:15:21
@JonathandeM。我使用了'jquery-ui.min.js'。它提供了反彈效果。但在我的代碼中沒有渲染效果。我已經將問題中的資源鏈接到了他們展示的演示中。 – SilentAssassin 2013-02-18 06:20:25
你可以給我們http://jsfiddle.net/鏈接包括CSS,圖像pathes到你的serwer,或者至少:'.right img {background:red;寬度:30px!重要; height:30px!important;}' – bumerang 2013-02-18 08:03:48