Die Funktion clone() in jQuery implementiert das Hinzufügen und Subtrahieren von Eingabeelementen im Formular

Dieser Artikel stellt Ihnen hauptsächlich den Beispielcode zum Hinzufügen und Reduzieren von Eingabeelementen im Formular mit der Funktion clone() vor. Er ist sehr gut und hat hoffentlich Referenzwert es kann jedem helfen.

Ich habe die Methode der clone()-Funktion noch nie im Detail verstanden, daher habe ich Eingabeelemente immer in der entsprechenden Form erhöht und verringert, wie zum Beispiel:

var copy_html=$(选择器).html(); 
alert(copy_html);

Das Problem besteht darin, dass das erhaltene copy_html direkt der HTML-Inhaltscode ist, ohne Objektkapselung, aber Folgendes verwendet:

var copy_html=$(选择器).clone(); 
alert(copy_html);

, um das zu erhalten unobject-Objekttyp, wenn $(selector) einen bestimmten Auslöser enthält, z. B. onclick. Wenn Sie möchten, dass copy_html weiterhin die onclick-Methode verwendet, fügen Sie einfach true:clone(true) zur Verwendung hinzu.

Gehen Sie direkt zum Bild:

Klicken Sie auf „+“, um es selbst zu kopieren und vor sich selbst anzuhängen:

Methode hinzufügen:

$(function(){　　
//增加省份、招生人数
　　$(".addbtn").click(function(){
　　　　var copy_str=$(this).parents(".form-group").clone();
　　　　copy_str.find("i").removeClass("fa-plus").addClass("fa-minus");　　　　//将按钮图标“+”，变为“-”　　　　
　　　　copy_str.find("button").removeClass("addbtn");　　　　　　　　　　　　　//去除class名“addbtn”,避免新增的输入项沿用此添加方法
　　　　copy_str.find("button").attr("onclick","canelf(this)");　　　　　　　　　　//增加点击删除自身触发事件
　　　　$(this).parent().parent().parent().before(copy_str);　　　　　　　　　　//追加
　　});
});
//增加项，删除方法
function canelf(e){
　　$(e).parent().parent().parent().remove();
}

Zum Schluss den HTML-Code einfügen:

<p class="form-group">
<label class="control-label col-md-2 col-sm-3 col-xs-3">省份</label>
<p class="col-md-10 col-sm-9 col-xs-9 ">
<p class="col-md-2 col-sm-3 col-xs-3 " style="padding-left:0;">
<select class="form-control input-sm">
<option>全部</option>
<option value="北京">北京市</option>
<option value="浙江省">浙江省</option>
<option value="天津市">天津市</option>
<option value="安徽省">安徽省</option>
<option value="上海市">上海市</option>
<option value="福建省">福建省</option>
<option value="重庆市">重庆市</option>
<option value="江西省">江西省</option>
<option value="山东省">山东省</option>
<option value="河南省">河南省</option>
<option value="湖北省">湖北省</option>
<option value="湖南省">湖南省</option>
<option value="广东省">广东省</option>
<option value="海南省">海南省</option>
<option value="山西省">山西省</option>
<option value="青海省">青海省</option>
<option value="江苏省">江苏省</option>
<option value="辽宁省">辽宁省</option>
<option value="吉林省">吉林省</option>
<option value="台湾省">台湾省</option>
<option value="河北省">河北省</option>
<option value="贵州省">贵州省</option>
<option value="四川省">四川省</option>
<option value="云南省">云南省</option>
<option value="陕西省">陕西省</option>
<option value="甘肃省">甘肃省</option>
<option value="黑龙江省">黑龙江省</option>
<option value="香港特别行政区">香港特别行政区</option>
<option value="澳门特别行政区">澳门特别行政区</option>
<option value="广西壮族自治区">广西壮族自治区</option>
<option value="宁夏回族自治区">宁夏回族自治区</option>
<option value="新疆维吾尔自治区">新疆维吾尔自治区</option>
<option value="内蒙古自治区">内蒙古自治区</option>
<option value="西藏自治区">西藏自治区</option>
</select>
</p>
<p class="col-md-2 col-sm-3 col-xs-3">
<p class=&#39;input-group input-group-sm&#39;>
<input type="text" class="form-control" placeholder="计划招生人数" />
<span class="input-group-addon">人
</span>
</p>
</p>
<p class="col-md-1 col-sm-2 col-xs-2">
<button type="button" class="btn btn-primary btn-sm addbtn"><i class="fa fa-plus"></i></button>
</p>
</p>
</p>

Verwandte Empfehlungen:

Detaillierte Erläuterung der Anwendungsbeispiele der clone()-Funktion in jQuery

Detaillierte Erläuterung von jQuery.clone () Funktionsbeispiele

Vergleich und Verwendung von clone() und extension() in jQuery

Das obige ist der detaillierte Inhalt vonDie Funktion clone() in jQuery implementiert das Hinzufügen und Subtrahieren von Eingabeelementen im Formular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!