我现在为此苦苦挣扎了一段时间。
我有 2 个“选项卡”,第一个选项卡可见,第二个选项卡隐藏。
我需要的是,当我添加更多选择元素并有机会选择该元素的值并单击“下一步”时,我需要添加到第一个“内容:”值为“Foo”和第二个“内容:例如''酒吧'。 但现在我每次都得到“Content: Foo Bar”和“Content: Foo Bar”。
请先看看这个 fiddle 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 + " ");
});
});
最佳答案
使用索引更新span
$(".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
关于javascript - jQuery .each 首先附加第二个值等,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20990963/