[Ajax http请求在我提出新请求时将先前的图像加载到Carousal中

Question

我正在使用javascript（带有WordPress REST API的PhoneGap和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" alt="...">
                            </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" alt="...">';
           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+'"  alt="...">'+
                                        '</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();




  }

Answer 1

似乎以前的调用中的图像似乎没有从authJsonGetProductDetails对象中删除。您可以尝试在If语句的顶部添加authJsonGetProductDetails.images = []，以查看是否有帮助。永久性解决方案将确保每个新请求都完全重置authJsonGetProductDetails对象，但希望这可以帮助您入门。