如何使用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");
  });
}