javascript - 动态下拉菜单不会填充正确的内容

Question

我正在构建一个脚本，它从 JSON 文件中获取一些内容并动态构建一些 html。 Html 将一些产品信息显示为某种外观手册。

html 里面有一些下拉框。这些盒子也是动态创建的。除了最后一个下拉框中的内容用于构建的每个下拉列表之外，一切都工作正常。见附图:

我个人认为发生这种情况的原因是因为变体是在实际的HTML构建之前构建和附加的？？!

$('#sets .set').each( function(){
    ....
    $.getJSON(url, function (data){
        var product = data.product;
        var $container = $('.products .product');
        var productsHtml = [];

        $.each(product.related, function(index, rel){
            $.getJSON(url, function (data){
                var rel = data.product;
                var wqsSelectVariants = $('<div class="product-configure-variants tui" />');
                var select = $('<select id="product_configure_variants"/>');

                $.each(rel.variants, function (index, variant){
                    select.append('<option value=' + variant.id + '>' + variant.title + '</option>');
                    wqsSelectVariants.append(select);
                });

                $('.varianten').html(wqsSelectVariants);
            });

            var productHtml = '' + '<div class="p"><div class="foto"><a href="'+fullurl+''+rel.url+'"><img class="rollover" src="'+image+'" hover="'+image2+'" alt="'+rel.fulltitle+'"/></a></div><div class="prijs" data-price="'+rel.price.price_incl+'">€'+rel.price.price_incl+'</div><div class="varianten"></div></div>';
            productsHtml.push(productHtml);
        });

        productsHtml = productsHtml.join('');
        $container.html(productsHtml);
    });
});

HTML

<div class="set">
    <div class="right">
        <div class="products">
            <div class="close"></div>
            <div class="product">
                **-- in here the content from the script example below --**
                <div class="p">
                    <div class="foto">
                        <a href="zwart.html">
                            <img alt="Enkellaars zwart" hover="image.jpg" src="image2.jpg" class="rollover">
                        </a>
                    </div>
                    <div data-price="39.95" class="prijs">€39.95</div>
                    <div class="varianten">
                        <div class="product-configure-variants tui">
                            <select id="product_configure_variants">
                                <option value="9996912">Maat: M/L</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- .products -->
    </div><!-- .right -->
    <div class="image">
        <img src="{{ product.image | url_image('220x330x2', product.fulltitle) }}" width="220" height="330" alt="{{ product.fulltitle }}" />
    </div>
</div>         

有人知道我做错了什么吗？

Answer 1

在$('#sets .set').each()循环中，.set的当前实例是this。

因此，您可以通过仅在当前实例内遍历来隔离每个 .set 的 '.varianten'

 $('#sets .set').each( function(){
      var $variant =$(this).find('.varianten');

      /* do all the ajax stuff */
});

然后更改行:

$('.varianten').html(wqsSelectVariants);

至

$variant.html(wqsSelectVariants);

请注意，ID 在页面中也必须是唯一的。