有两个内联的文本框,在它们旁边有一个“+”号。 单击加号后,会添加一个新的文本框,它将分别带有“+”和“ - ”号以便分别添加和删除文本框 。我使用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