当我提出新请求时，Ajax http 请求将以前的图像加载到轮播中

Posted 2023-05-08

【中文标题】当我提出新请求时，Ajax http 请求将以前的图像加载到轮播中

【英文标题】：Ajax http request loads previouse images into carousal when i make new request

【发布时间】：2020-03-30 18:47:12

【问题描述】：

我正在开发一个使用 javascript 的移动应用程序（PhoneGap with Wordpress Rest API for wooCommerce Multivendor。

我的代码用于收集产品 ID 并将图像加载到轮播中。

问题 当我单击任何产品时，它会加载图像，如果我返回并单击一个新产品，它会加载新产品的图像以及我加载到轮播中的上一个产品的图像。

我从早上起就一直在和它作斗争。任何可以帮助的建议将不胜感激

HTML

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
                          <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img id="mainImage" src="" class="d-block w-100" >
                            </div>
                        <div id="otherImgagesHere">

                        </div>
                          </div>
                        </div>

JAVASCRIPT

<script>
var tokenDetails = 'xxxxxxxxxxxxxxxxxxxxxxxxwENs';

  function loadDetail(lnk)
    var selProductId = lnk.getAttribute('value');

  var getProductDetails = new XMLHttpRequest();
  getProductDetails.onreadystatechange = function() 
    if (this.readyState == 4 && this.status == 200) 

          var authJsonGetProductDetails = JSON.parse(getProductDetails.responseText);
          document.getElementById('productDetailName').innerhtml = authJsonGetProductDetails.name;
          document.getElementById('productDetailTitle').innerHTML = authJsonGetProductDetails.name;
          document.getElementById('productDetailPrice').innerHTML = authJsonGetProductDetails.price;
          document.getElementById('productDetailShort_description').innerHTML = authJsonGetProductDetails.short_description;


          var mainImageName = authJsonGetProductDetails.images[0].src;
          console.log(mainImageName);

          document.getElementById("mainImage").src = mainImageName;

          var mainImageDisplayCode = '<img src="'+mainImageName+'" class="d-block w-100" >';
           console.log(mainImageDisplayCode);
           document.getElementById('mainImage').innerHTML = mainImageDisplayCode;

         // document.getElementById("mainImage").setAttribute("src", authJsonGetProductDetails.images[0].src); 
          //console.log(authJsonGetProductDetails.images[x].src);

         for(var x=0; x <  authJsonGetProductDetails.images.length; x++) 
           var imageLink = authJsonGetProductDetails.images[x].src;
           var otherImageDisplayCode = '<div  class="carousel-item">'+
                                          '<img src="'+imageLink+'"  >'+
                                        '</div>'; 
          console.log(otherImageDisplayCode);           
           document.getElementById('otherImgagesHere').innerHTML += otherImageDisplayCode;
         


          location.replace("#productDetails");

    
  ;
getProductDetails.open("GET", "<base_url>/wp-json/wcfmmp/v1/products/"+selProductId, true);
getProductDetails.setRequestHeader("Content-Type", "application/json");
getProductDetails.setRequestHeader('Authorization', 'Bearer ' + tokenDetails);
getProductDetails.setRequestHeader('Cache-Control', 'no-cache');
getProductDetails.send();




  

【问题讨论】：

如果有任何截图可能更有意义，根据你所说的。如果您打算只拥有一种产品，您是否会在加载新的轮播之前尝试“清理”您的轮播？

【参考方案1】：

错误的代码行在你添加 HTML 元素的最后的 for 循环中：

document.getElementById('otherImgagesHere').innerHTML += otherImageDisplayCode;

您正在使用 +=，因此它始终会附加到之前的内容。我建议添加

document.getElementById('otherImgagesHere').innerHTML = ""

就在你的 for 循环上方，看看是否有帮助