jQuery. Каждое добавление, затем второе значение и т. д.

0

Я сейчас немного борюсь с этим.

У меня есть 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 + " ");
    });
});

3 ответа

2
Лучший ответ

Использовать индекс для обновления диапазона

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

Демо: скрипка

  • 0
    Спасибо, это прекрасно работает, но что значит .eq (i)?
  • 0
    i указываю index
Показать ещё 2 комментария
1

Проблема в том, что вы добавляете контент в каждый интервал в div # tab_2

Вам нужно настроить таргетинг на них, используя что-то вроде .eq()

Измените обработчик кликов на это:

$(".add_content").click(function() {
    $("#tab1 select").each(function(i) {
       var content = $(this).val();
       $("#tab2 p span").eq(i).append(content + " ");
    });
});
1

другой вариант просто изменит вашу функцию, как показано ниже. Вы можете попробовать, это должно сработать.

$(".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-го элемента его индекса

  • 0
    Спасибо, это также сработало, показывает мне другой вариант. Хорошо знать.
  • 0
    Если это полезно для вас, дайте ему отзыв, чтобы другие могли понять, что это также допустимый вариант.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню