Question

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

在html中有几个下拉框。这些框也是动态创建的。除了最后一个下拉框中的内容用于构建的每个下拉列表之外，一切正常。见附图： enter image description here

我个人认为，之所以发生这种情况，是因为variants是在构建实际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的循环为'.varianten'。

因此，您可以通过仅在当前实例中遍历来隔离每个.set的{{1}}

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

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

然后更改行：

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

要

$variant.html(wqsSelectVariants);

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

动态下拉列表不会填充正确的内容

1 个答案: