La fonction clone() dans jQuery implémente l'ajout et la soustraction d'éléments d'entrée sous la forme

Cet article vous présente principalement l'exemple de code d'ajout et de réduction d'éléments d'entrée dans le formulaire à l'aide de la fonction clone() dans jQuery. Il est très bon et a une valeur de référence. J'espère que les amis qui en ont besoin pourront s'y référer. cela peut aider tout le monde.

Je n'ai jamais compris en profondeur la méthode de la fonction clone() auparavant, j'ai donc toujours utilisé pour augmenter et diminuer les éléments d'entrée sous la forme correspondante, tels que :

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

Le problème est que le copy_html obtenu est directement le code du contenu HTML sans encapsulation d'objet, utilisez plutôt :

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

pour obtenir le. type d'objet unobject. Si $(selector ) contient un certain déclencheur, tel que onclick. Si vous souhaitez que copy_html continue à utiliser la méthode onclick, ajoutez simplement true:clone(true) à utiliser.

Aller directement à l'image :

Cliquez sur "+" pour la copier et l'ajouter avant elle-même :

Ajouter une méthode :

$(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();
}

Collez enfin le code HTML :

<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>

Recommandations associées :

Explication détaillée des exemples d'utilisation de la fonction clone() dans jQuery

Explication détaillée de jQuery.clone () exemples de fonctions

Comparaison et utilisation de clone() et extend() dans jQuery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!