ajax 的结果在克隆元素 html 中重复（来自数组）

问题描述 投票：0回答：1

在 php 中，有一个包含类别中的项目的数组。可以有几个类别。任务是根据所选类别制作一个产品表。如果所选类别有两个或多个，则结果会在页面上重复。

如果选择了一个类别，则一切正常。当我选择两个类别时，数组是不同的。第一个数组创建一个表并将两个查询的结果放入其中，然后第二个数组执行相同的操作，因此它是重复的。我需要第一个数组从第一个查询创建表，使用第二个数组从第二个查询创建第二个表。

see clone elements on page - result

如何从第一个块中删除第二个块的值的重复项？

categories_id.forEach(function(category_id) {
  $.ajax({
    type: 'GET',
    url: 'ajax-tab.php' + '?rand=' + new Date().getTime() + '&ajax=true&controller=AdminInventory&action=searchProductsByCategory&token=' + token + '&search_category_id=' + category_id,
    cache: false,
    dataType: "json",
    ajax: true,
    success: function(data) {
      let $injectAfter = $('.inventory_products_lines_head').last();
      $.each(data.products, function(key, val) {
        status = '';
        if (val.active == 1) {
          status = '<i style="color: #72C279;" class="icon-check"></i>';
        } else {
          status = '<i style="color: #E08F95;" class="icon-remove"></i>';
        }
        let clone = $('.inventory_products_lines.inventory_products_lines_values').last().clone();
        clone.find('.id_product_attribute').html('<input name="id_product_attribute[]" id="inventory_id_product_attribute" type="hidden" value="0" />');
        clone.find('.now_quantity').html('<input type="hidden" name="now_quantity[]" id="now_quantity" value="' + val.quantity + '"><span>' + val.quantity + '</span>').attr('data-quantity', val.quantity);
        clone.find(".brand").html('<span>' + val.manufacturer_name + '</span>');
        clone.find(".name").html('<span>' + val.name + '</span>');
        clone.find(".status").html(status);
        clone.find(".wholesale_price").html('<input name="wholesale_price[]" id="wholesale_price" type="hidden" value="' + val.wholesale_price + '" /><span>' + val.formatted_wholesale_price + '</span>');
        clone.find(".price").html('<input name="price[]" id="price" type="hidden" value="' + val.price + '" /><span>' + val.formatted_price + '</span>');
        clone.find('.id_product').html('<input name="id_product[]" id="inventory_id_product" type="hidden" value="' + val.id_product + '" />');
        clone.removeClass('hidden').insertAfter($injectAfter);
        $('.inventory_products_lines_values').closest('div').after(clone);

      });
      let inventory_products = $('#default_inventory_products .inventory_products_block').clone(true);
      inventory_products.find('.search_category_name').append('<h2>' + data.category_name + '</h2>');
      $('#inventory_products').closest('div').after(inventory_products);
      $('.inventory_products_lines_result').each(function(i) {
        var number = i + 1;
        $(this).find('div:first').text(number + ".");
      });
    }
  });
});

   <div class="form-group inventory_products" id="inventory_products"></div>
<div class="hidden" id="default_inventory_products">
    <div class="inventory_products_block">
            <div class="inventory_products_lines inventory_products_lines_head">
                <div></div>
                <div class="hidden"></div>
                <div class="hidden"></div>
                <div class="search_category_name head"></div>
                <div class="combinations_head head">Comb</div>
                <div class="brand_head head">Brand</div>
                <div class="wholesale_price_head head">wholesale price</div>
                <div class="price_head head">retail price</div>
                <div class="now_quantity_head head">now q-ty</div>
                <div class="quantity_head head">new q-ty</div>
                <div class="discrepancy_head head">discrepancy</div>
                <div class="status_head head">status</div>
            </div>
    </div>
</div>
<div class="inventory_products_lines inventory_products_lines_values hidden inventory_products_lines_result">
    <div class="product_number"></div>
    <div class="id_product hidden"></div>
    <div class="id_product_attribute hidden"></div>
    <div class="name"></div>
    <div class="combinations"></div>
    <div class="brand"></div>
    <div class="wholesale_price"></div>
    <div class="price"></div>
    <div class="now_quantity"></div>
    <div class="inventory_quantity"><input name="inventory_quantity[]" id="inventory_quantity" type="text" value="" /></div>
    <div class="discrepancy_block"><input name="discrepancy[]" id="discrepancy" type="hidden" value="" /><span class="discrepancy"></span></div>
    <div class="category_inventory_wholesale_deficit_block"><input name="category_inventory_wholesale_deficit_price[]" id="category_inventory_wholesale_deficit_price" type="hidden" value="" /></div>
    <div class="category_inventory_retail_deficit_price_block"><input name="category_inventory_retail_deficit_price[]" id="category_inventory_retail_deficit_price" type="hidden" value="" /></div>
    <div class="status"></div>
</div>

我认为问题是克隆和错误的html。

javascript html jquery ajax clone
1个回答
0
投票

让我们根据您的代码创建一个工作示例。我们将使用超时来伪造 ajax。

categories_id = [1, 2];

categories_id.forEach(function(category_id) {
  setTimeout(function(data) {
    let $injectAfter = $('.inventory_products_lines_head');
    data = {
      category_name: 'category ' + category_id,
      products: [{
        manufacturer_name: 'nike',
        name: 'alfred',
        quantity: 50,
        id_product: 12,

      }, {
        manufacturer_name: 'adidas',
        name: 'berko',
        quantity: 50,
        id_product: 13,
      }]

    }
    $.each(data.products, function(key, val) {
      status = '';
      if (val.active == 1) {
        status = '<i style="color: #72C279;" class="icon-check"></i>';
      } else {
        status = '<i style="color: #E08F95;" class="icon-remove"></i>';
      }
      let clone = $('.inventory_products_lines.inventory_products_lines_values').last().clone();
      clone.find(".brand").html('<span>' + val.manufacturer_name + '</span>');
      clone.find(".name").html('<span>' + val.name + '</span>');
      clone.find(".status").html(status);
      clone.find('.id_product').html('<input name="id_product[]" id="inventory_id_product" type="hidden" value="' + val.id_product + '" />');
      clone.removeClass('hidden').insertAfter($injectAfter);
      $('.inventory_products_lines_values').closest('div').after(clone);

    });
    let inventory_products = $('#default_inventory_products .inventory_products_block').clone(true);
    inventory_products.find('.search_category_name').append('<h2>' + data.category_name + '</h2>');
    $('#inventory_products').closest('div').after(inventory_products);
    $('.inventory_products_lines_result').each(function(i) {
      var number = i + 1;
      $(this).find('div:first').text(number + ".");
    });
  }, 200 * category_id)
})
.hidden {
  display: none
}

.inventory_products_lines_values,
.inventory_products_block {
  border: 1px solid green;
  margin: 10px;
  padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="form-group inventory_products" id="inventory_products"></div>

<div class="hidden" id="default_inventory_products">
  <div class="inventory_products_block">
    <div class="inventory_products_lines inventory_products_lines_head">
      <div class="search_category_name head"></div>
      <div class="combinations_head head">Comb</div>
      <div class="brand_head head">Brand</div>
      <div class="wholesale_price_head head">wholesale price</div>
      <div class="price_head head">retail price</div>
      <div class="now_quantity_head head">now q-ty</div>
      <div class="quantity_head head">new q-ty</div>
      <div class="discrepancy_head head">discrepancy</div>
      <div class="status_head head">status</div>
    </div>
  </div>
</div>


<div class="inventory_products_lines inventory_products_lines_values hidden inventory_products_lines_result">
  <div class="product_number"></div>
  <div class="id_product hidden"></div>
  <div class="id_product_attribute hidden"></div>
  <div class="name"></div>
  <div class="combinations"></div>
  <div class="brand"></div>
  <div class="wholesale_price"></div>
  <div class="price"></div>
  <div class="now_quantity"></div>
  <div class="inventory_quantity"><input name="inventory_quantity[]" id="inventory_quantity" type="text" value="" /></div>
  <div class="discrepancy_block"><input name="discrepancy[]" id="discrepancy" type="hidden" value="" /><span class="discrepancy"></span></div>
  <div class="category_inventory_wholesale_deficit_block"><input name="category_inventory_wholesale_deficit_price[]" id="category_inventory_wholesale_deficit_price" type="hidden" value="" /></div>
  <div class="category_inventory_retail_deficit_price_block"><input name="category_inventory_retail_deficit_price[]" id="category_inventory_retail_deficit_price" type="hidden" value="" /></div>
  <div class="status"></div>
</div>

结果错误！

现在让我们构建一个有效的示例。对于每个类别，我们将添加一个容器（a-block），其中包含一个产品容器。然后就是将正确的 div 添加到正确的容器中。我不喜欢克隆，所以我使用了 HTML 模板（作为字符串）。

categories_id = [1, 2];

var container = $(".container")
var template_block = $(".a-block")[0].outerHTML
var template_product = $(".a-product")[0].outerHTML

categories_id.forEach(function(category_id) {
  setTimeout(function(data) {

    data = {
      category_name: 'category ' + category_id,
      products: [{
        manufacturer_name: 'nike',
        name: 'alfred',
        quantity: 50,
        id_product: 12 + category_id * 3,

      }, {
        manufacturer_name: 'adidas',
        name: 'berko',
        quantity: 50,
        id_product: 13 + category_id * 3,
      }]
    }

    let inventory_products = $(template_block)
    inventory_products.find('h2').html(data.category_name);
    inventory_products.removeClass("hidden")
    container.append(inventory_products);

    var products_container = inventory_products.find(".products")

    $.each(data.products, function(key, val) {
      let clone = $(template_product)
      clone.removeClass("hidden")
      clone.find(".brand").html('<span>' + val.manufacturer_name + '</span>');
      clone.find(".name").html('<span>' + val.name + '</span>');
      clone.find('.id_product').html('<input name="id_product[]" id="inventory_id_product" type="text" value="' + val.id_product + '" />');
      products_container.append(clone)
    });



  }, 200 * category_id)
})
.hidden {
  display: none
}

.a-block,
.a-product {
  border: 1px solid green;
  margin: 10px;
  padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="container">
</div>


<div class="hidden a-block">
  <h2></h2>
  <div class="products">
  </div>
</div>

<div class="hidden a-product">
  <div class="id_product"></div>
  <div class="brand"></div>
  <div class="name"></div>
  <div class="quantity"></div>



</div>

请注意：添加类似来自 ajax 请求的产品并不能保证块的顺序符合您的预期。一种选择是 等待所有 ajax 请求完成后再追加它们。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.