我为此苦了一段时间。
我有2个“标签”,第一个标签可见,第二个标签隐藏。
我需要的是,当我添加更多选择元素并选择该选择元素的值并单击“下一步”时,我需要将第一个“ Content:”添加为值“ Foo”,并将第二个“ Content:”添加例如“酒吧”。
但是现在我每次都得到“ Content:Foo Bar”和“ Content:Foo Bar”。
首先看看这个小提琴,请Click here
这是我的HTML:
<div id="tab1">
<p>
<select>
<option>Foo</option>
<option>Bar</option>
</select>
</p>
<a href="#" class="add">add</a>
<input type="button" value="next" class="next add_content" />
</div>
<div id="tab2">
<p>Content: <span></span></p>
<input type="button" value="prev" class="prev" />
</div>
这是我的jQuery:
$(".next").click(function(){
$(this).parent().hide();
$(this).parent().next().show();
});
$(".prev").click(function(){
$(this).parent().hide();
$(this).parent().prev().show();
});
$("a.add").click(function(){
var row = $("#tab1").children("p").first().clone();
var row2 = $("#tab2").children("p").first().clone();
row.insertBefore(this);
row2.insertAfter("#tab2 p:last");
return false;
});
$(".add_content").click(function() {
$("#tab1 select option:selected").each(function() {
var content = $(this).val();
$("#tab2 p span").append(content + " ");
});
});
最佳答案
使用索引更新跨度
$(".add_content").click(function () {
var spans = $("#tab2 p span");
$("#tab1 select option:selected").each(function (i) {
var content = $(this).val();
spans.eq(i).text(content); // as suggested by @RaphaëlAlthaus
});
});
演示:Fiddle