我为此苦了一段时间。

我有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

10-05 20:38
查看更多