Я сейчас немного борюсь с этим.
У меня есть 2 "вкладки", первая вкладка видна, а вторая вкладка скрыта.
Мне нужно, когда я добавляю больше элементов выбора и получаю значение этого элемента select, и я нажимаю "next", мне нужно добавить к первому "Контент:" со значением "Foo" и ко второму "Контенту": Например, "Бар". Но теперь я получаю "Content: Foo Bar" и "Content: Foo Bar" каждый раз.
Сначала взгляните на эту скрипку, пожалуйста, нажмите здесь.
Это мой 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
});
});
Демо: скрипка
Проблема в том, что вы добавляете контент в каждый интервал в div # tab_2
Вам нужно настроить таргетинг на них, используя что-то вроде .eq()
Измените обработчик кликов на это:
$(".add_content").click(function() {
$("#tab1 select").each(function(i) {
var content = $(this).val();
$("#tab2 p span").eq(i).append(content + " ");
});
});
другой вариант просто изменит вашу функцию, как показано ниже. Вы можете попробовать, это должно сработать.
$(".add_content").click(function() {
var i = 0;
$("#tab1 select option:selected").each(function() {
var content = $(this).val();
$("#tab2 p span:eq("+i+")").text(content + " ");
++i;
});
});
Вот скрипка: скрипка
eq (0) аналогично выбору 0-го или 1-го элемента его индекса
i
указываюindex