如何使用jquery或Javascript將div內容替換為其他div？

Question

大家好，我有一些要動態添加到div的視圖。...我對不同的方法進行了三個ajax調用。...首先，我在div中顯示了產品的所有圖像....如果用戶選擇價格范圍，產品將僅顯示該價格范圍，並且與顏色相同。.我想要的是當用戶選擇價格范圍或顏色時，所有圖像的div應該用新圖像替換的方法我這樣做可以幫助任何人在這里

    <script type="text/javascript">
     $(document).ready(function () {            
         $.getJSON("/api/ProductLayout", function (data) {                 
             $.each(data, function (idx, ele) {
                 $("#makeMeScrollable").append('ProdcutID'+'<span>' + ele.ProductID +
                                  '</span>ProductName<span>' + ele.ProductName + '</span>Price<span>' + ele.Price + '</span>');
                 $("<img/>").attr({ src: ele.ImageURL }).appendTo("#makeMeScrollable");
             });
             scrollablediv();
         });
     });
     function scrollablediv() {             
         $("div#makeMeScrollable").smoothDivScroll({
             mousewheelScrolling: true,
             manualContinuousScrolling: true,
             visibleHotSpotBackgrounds: "always",
             autoScrollingMode: "onstart"
         });
     }
</script>
<script type="text/javascript">
    $(function () {
        $("#slider-range").slider({
            range: true,
            min: 0,
            max: 500,
            values: [0,0],
            slide: function (event, ui) {
                $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
            },
            change: function (event, ui) {
                // when the user change the slider
            },
            stop: function (event, ui) {
                // when the user stopped changing the slider                    
                $.get("/api/ProductLayout", { firstPrice: ui.values[0], secondPrice: ui.values[1] }, function (data) {                        
                    $.each(data, function (idx, ele) {
                        $("#makeMeScrollable").append('<lable>ProdcutID:</label>' + '<span>' + ele.ProductID +
                                  '</span><br/><lable>ProductName:</label><span>' + ele.ProductName + '</span><br/><label>Price:</label><span>' + ele.Price + '</span>');
                        $("<img/>").attr({ src: ele.ImageURL }).appendTo("#makeMeScrollable");
                    });                        
                });
            }
        });
        $("#amount").val("$" + $("#slider-range").slider("values", 0) +
        " - $" + $("#slider-range").slider("values", 1));
    });
</script>
<script type="text/javascript">
    function getproductbycolor(colours) {
        alert(1);
        $.get("/api/ProductLayout", { color: colours }, function (data) {
            alert(data.toString());
            $.each(data, function (idx, ele) {
                $("#makeMeScrollable").append('<lable>ProdcutID:</label>' + '<span>' + ele.ProductID +
                                  '</span><br/><lable>ProductName:</label><span>' + ele.ProductName + '</span><br/><label>Price:</label><span>' + ele.Price + '</span><br/><label>Product Color:</label><span>'+ele.ProductColor+'</span>');
                $("<img/>").attr({ src: ele.ImageURL }).appendTo("#makeMeScrollable");
            });
        });
    }

</script>

這是我的HTML

   <div id="makeMeScrollable" style="height: 400px; width: 400px;">

</div>

我應該將所有圖像僅附加到上述div上，以替換先前的圖像

Answer 1

就像jaswant所說的那樣，您可以使用.empty（）方法，但不能使用.empty（）。append（），這是因為一旦綁定了新記錄，它將清空數據，因此請在調用ajax之前使用.empty（）方法或json呼叫

      $("#makeMeScrollable").empty();

在您的ajax調用之前添加以上行

  <script type="text/javascript">
function getproductbycolor(colours) {
    alert(1);
   $("#makeMeScrollable").empty();
    $.get("/api/ProductLayout", { color: colours }, function (data) {
        alert(data.toString());
        $.each(data, function (idx, ele) {
            $("#makeMeScrollable").append('<lable>ProdcutID:</label>' + '<span>' + ele.ProductID +
                              '</span><br/><lable>ProductName:</label><span>' + ele.ProductName + '</span><br/><label>Price:</label><span>' + ele.Price + '</span><br/><label>Product Color:</label><span>'+ele.ProductColor+'</span>');
            $("<img/>").attr({ src: ele.ImageURL }).appendTo("#makeMeScrollable");
        });
    });
}

Answer 2

嘗試這個，

$("#makeMeScrollable").html('ProdcutID<span>' + ele.ProductID +
  '</span>ProductName<span>' + ele.ProductName + '</span>Price<span>' + 
  ele.Price + '</span><img src="' + ele.ImageURL + '" />'); 

您始終可以使用html()代替append()來刪除現有內容。

或者您可以在添加.empty().append()之前清空元素

編輯 （評論后）

 var $div = $("#makeMeScrollable");
    $div.empty();
    $.each(data, function (idx, ele) {.append('ProdcutID' + '<span>' + ele.ProductID + '</span>ProductName<span>' + ele.ProductName + '</span>Price<span>' + ele.Price + '</span>');
        $("<img/>").attr({
            src: ele.ImageURL
        }).appendTo("#makeMeScrollable");
    });

Answer 3

您應該在成功處理程序中首先執行空操作。 因為調用是異步的，所以如果在執行ajax調用之前清除區域，則可能會有產品相互干擾的風險。

$(document).ready(function () {            
  $.getJSON("/api/ProductLayout").success(function (data) {
    clearProductDisplayArea();
    displayProductInfo(data);
    scrollablediv();
  });
});

function clearProductDisplayArea(){
  $("#makeMeScrollable").empty();
}

function displayProductInfo(data){
  $.each(data, function (idx, ele) {
    $("#makeMeScrollable").append('ProdcutID'+'<span>' + ele.ProductID +
       '</span>ProductName<span>' + ele.ProductName + '</span>Price<span>' + ele.Price + '</span>');
    $("<img/>").attr({ src: ele.ImageURL }).appendTo("#makeMeScrollable");
  });
}