0

大家好，我有一些我在我的视图中动态附加到 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 替换以前的图像

4

3 回答 3

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");
        });
    });
}
于 2012-09-15T06:58:26.717 回答
0

试试这个，

$("#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");
    });
于 2012-09-15T06:32:48.417 回答
0

您应该在成功处理程序中将空作为第一个操作。由于调用是异步的，如果在进行 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");
  });
}
于 2012-09-15T07:10:40.937 回答