问题描述
我为动态内容设置了 jquery 和 bootstrap 折叠。当我为标题键入一些值时,它会为所有动态添加的标题复制。我尝试对任何标题和输入使用个人 ID,但这没有帮助。我怎样才能找到并解决这个问题?
标题听得见
<span id="accordioninnertitle" class="experience_title" data-toggle="collapse" data-target="#exp_1"></span> (<em class="exp_start"></em> - <em class="exp_end"></em>)
谢谢,提前。
HTML
<div class="wt-tabscontenttitle wt-addnew">
<h2>Add Your Experience</h2>
<a href="javascript:void(0);" id="add_experience">Add New</a>
</div>
<ul class="wt-experienceaccordion accordion" id="experience_wrapper">
<li id="experience_list">
<div class="wt-accordioninnertitle">
Title goes here
<span id="accordioninnertitle" class="experience_title" data-toggle="collapse" data-target="#exp_1"></span> (<em class="exp_start"></em> - <em class="exp_end"></em>)
<div class="wt-rightarea">
<a href="javascript:void(0);" class="wt-addinfo wt-skillsaddinfo" id="accordioninnertitle" data-toggle="collapse" data-target="#exp_1" aria-expanded="true">
<i class="lnr lnr-pencil"></i>
</a>
<a href="javascript:void(0);" class="wt-deleteinfo">
<i class="lnr lnr-trash" id="remove_experience"></i>
</a>
</div>
</div>
<div class="wt-collapseexp collapse hide" id="exp_1" aria-labelledby="accordioninnertitle" data-parent="#accordion">
<div class="wt-formtheme wt-userform">
<fieldset>
<div class="form-group form-group-half">
<input type="text" name="organisation" class="form-control" placeholder="Company Title" id="experience_organisation" />
</div>
<div class="form-group form-group-half">
<input type="date" name="start" class="form-control" placeholder="Starting Date" id="experience_start" />
</div>
<div class="form-group form-group-half">
<input type="date" name="end" class="form-control" placeholder="Ending Date *" id="experience_end" />
</div>
<div class="form-group form-group-half">
<input type="text" name="position" class="form-control" placeholder="Position" />
</div>
<div class="form-group">
<textarea name="descript" class="form-control" placeholder="Your Job Description"></textarea>
</div>
<div class="form-group">
<span>* Leave ending date empty if its your current job</span>
</div>
</fieldset>
</div>
</div>
</li>
</ul>
jQuery
jQuery(function () {
var experince_count = 1;
var experince_max_fileds = 5;
$("#add_experience").click(function (event) {
if (experince_count < experince_max_fileds) {
experince_count++;
$("#experience_wrapper").append(
'<li id="experience_list">' +
'<div class="wt-accordioninnertitle">' +
'<span id="accordioninnertitle" class="experience_title" data-toggle="collapse" data-target="#exp_' +
experince_count +
'"></span>(<em class="exp_start"></em> - <em class="exp_end"></em>)' +
'<div class="wt-rightarea">' +
'<a href="javascript:void(0);" class="wt-addinfo wt-skillsaddinfo" id="accordioninnertitle" data-toggle="collapse" data-target="#exp_' +
experince_count +
'" aria-expanded="true">' +
'<i class="lnr lnr-pencil"></i>' +
"</a>" +
'<a href="javascript:void(0);" class="wt-deleteinfo">' +
'<i class="lnr lnr-trash" id="remove_experience"></i>' +
"</a>" +
"</div>" +
"</div>" +
'<div class="wt-collapseexp collapse hide" id="exp_' +
experince_count +
'" aria-labelledby="accordioninnertitle" data-parent="#accordion">' +
'<div class="wt-formtheme wt-userform">' +
"<fieldset>" +
'<div class="form-group form-group-half">' +
'<input type="text" name="organisation" class="form-control" placeholder="Organisation Name" id="experience_organisation">' +
"</div>" +
'<div class="form-group form-group-half">' +
'<input type="date" name="start" class="form-control" placeholder="Starting Date" id="experience_start">' +
"</div>" +
'<div class="form-group form-group-half">' +
'<input type="date" name="end" class="form-control" placeholder="Ending Date *" id="experience_end">' +
"</div>" +
'<div class="form-group form-group-half">' +
'<input type="text" name="position" class="form-control" placeholder="Position">' +
"</div>" +
'<div class="form-group">' +
'<textarea name="descript" class="form-control" placeholder="Your Job Description"></textarea>' +
"</div>" +
'<div class="form-group">' +
"<span>* Leave ending date empty if its your current job</span>" +
"</div>" +
"</fieldset>" +
" </div>" +
"</div>" +
"</li>"
);
}
});
$("#experience_wrapper").on("click","#remove_experience",function (event) {
event.preventDefault();
$(this).closest("#experience_list").remove();
x--;
});
$("#experience_wrapper").on("keyup","#experience_organisation",function (event) {
$("#experience_wrapper").find(".experience_title").text($(this).val());
});
$("#experience_wrapper").on("keyup change","#experience_start",function (event) {
$("#experience_wrapper").find(".exp_start").text($(this).val());
});
$("#experience_wrapper").on("keyup change","#experience_end",function (event) {
$("#experience_wrapper").find(".exp_end").text($(this).val());
});
});
解决方法
这是因为您在更改事件中使用了类(例如 .experience_title
)
在这种情况下,我的意思是最好使用 data-attributes
( https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes )。您可以使用 experince_count
作为其值。
因此,您需要为每个组织名称、日期开始和结束日期提供数据属性,以便为您提供相关体验的索引。之后,您需要创建一个“目标”数据属性(为了更清楚,我创建了三个)。最后,您需要更改事件中的选择器。
你可以用连接/分解 id 字符串来做同样的事情,但它更复杂,不太清楚,也不是很有用。
这是我的答案:
jQuery(function () {
var experince_count = 1;
var experince_max_fileds = 5;
$("#add_experience").click(function (event) {
if (experince_count < experince_max_fileds) {
experince_count++;
$("#experience_wrapper").append(
'<li id="experience_list">' +
'<div class="wt-accordioninnertitle">' +
'<span id="accordioninnertitle" class="experience_title" data-toggle="collapse" data-target-title="' +
experince_count +
'"></span>(<em class="exp_start" data-target-date-start="'+experince_count+'"></em> - <em class="exp_end" data-target-date-end="'+experince_count+'"></em>)' +
'<div class="wt-rightarea">' +
'<a href="javascript:void(0);" class="wt-addinfo wt-skillsaddinfo" id="accordioninnertitle" data-toggle="collapse" data-target="#exp_' +
experince_count +
'" aria-expanded="true">' +
'<i class="lnr lnr-pencil"></i>' +
"</a>" +
'<a href="javascript:void(0);" class="wt-deleteinfo">' +
'<i class="lnr lnr-trash" id="remove_experience"></i>' +
"</a>" +
"</div>" +
"</div>" +
'<div class="wt-collapseexp collapse hide" aria-labelledby="accordioninnertitle" data-parent="#accordion">' +
'<div class="wt-formtheme wt-userform">' +
"<fieldset>" +
'<div class="form-group form-group-half">' +
'<input type="text" name="organisation" class="form-control" placeholder="Organisation Name" id="experience_organisation" data-exp="'+experince_count+'">' +
"</div>" +
'<div class="form-group form-group-half">' +
'<input type="date" name="start" class="form-control" placeholder="Starting Date" id="experience_start" data-exp="'+experince_count+'">' +
"</div>" +
'<div class="form-group form-group-half">' +
'<input type="date" name="end" class="form-control" placeholder="Ending Date *" id="experience_end" data-exp="'+experince_count+'">' +
"</div>" +
'<div class="form-group form-group-half">' +
'<input type="text" name="position" class="form-control" placeholder="Position">' +
"</div>" +
'<div class="form-group">' +
'<textarea name="descript" class="form-control" placeholder="Your Job Description"></textarea>' +
"</div>" +
'<div class="form-group">' +
"<span>* Leave ending date empty if its your current job</span>" +
"</div>" +
"</fieldset>" +
" </div>" +
"</div>" +
"</li>"
);
}
});
$("#experience_wrapper").on("click","#remove_experience",function (event) {
event.preventDefault();
$(this).closest("#experience_list").remove();
x--;
});
$("#experience_wrapper").on("keyup","#experience_organisation",function (event) {
value = $(this).attr("data-exp");
$("#experience_wrapper").find("[data-target-title='"+value+"']").text($(this).val());
});
$("#experience_wrapper").on("keyup change","#experience_start",function (event) {
value = $(this).attr("data-exp");
$("#experience_wrapper").find("[data-target-date-start='"+value+"']").text($(this).val());
});
$("#experience_wrapper").on("keyup change","#experience_end",function (event) {
value = $(this).attr("data-exp");
$("#experience_wrapper").find("[data-target-date-end='"+value+"']").text($(this).val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wt-tabscontenttitle wt-addnew">
<h2>Add Your Experience</h2>
<a href="javascript:void(0);" id="add_experience">Add New</a>
</div>
<ul class="wt-experienceaccordion accordion" id="experience_wrapper">
<li id="experience_list">
<div class="wt-accordioninnertitle">
Title goes here
<span id="accordioninnertitle" class="experience_title" data-toggle="collapse" data-target-title="1"></span> (<em class="exp_start" data-target-date-start="1"></em> - <em class="exp_end" data-target-date-end="1"></em>)
<div class="wt-rightarea">
<a href="javascript:void(0);" class="wt-addinfo wt-skillsaddinfo" id="accordioninnertitle" data-toggle="collapse" data-target="#exp_1" aria-expanded="true">
<i class="lnr lnr-pencil"></i>
</a>
<a href="javascript:void(0);" class="wt-deleteinfo">
<i class="lnr lnr-trash" id="remove_experience"></i>
</a>
</div>
</div>
<div class="wt-collapseexp collapse hide" id="exp_1" aria-labelledby="accordioninnertitle" data-parent="#accordion">
<div class="wt-formtheme wt-userform">
<fieldset>
<div class="form-group form-group-half">
<input type="text" name="organisation" class="form-control" placeholder="Company Title" id="experience_organisation" data-exp="1"/>
</div>
<div class="form-group form-group-half">
<input type="date" name="start" class="form-control" placeholder="Starting Date" id="experience_start" data-exp="1"/>
</div>
<div class="form-group form-group-half">
<input type="date" name="end" class="form-control" placeholder="Ending Date *" id="experience_end" data-exp="1"/>
</div>
<div class="form-group form-group-half">
<input type="text" name="position" class="form-control" placeholder="Position" />
</div>
<div class="form-group">
<textarea name="descript" class="form-control" placeholder="Your Job Description"></textarea>
</div>
<div class="form-group">
<span>* Leave ending date empty if its your current job</span>
</div>
</fieldset>
</div>
</div>
</li>
</ul>