如何使用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

試試這個，

$("#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 2

前追加正如賈斯萬特·你可以使用.empty（）方法，但不是.empty（說）.append（）這樣做是將你的Ajax調用或JSON呼叫

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

前空）當過一個新的記錄綁定所以使用.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 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"); 
    }); 
}