0

こんにちはすべて私は私のビューで動的にdivに追加しているものを持っています....私は異なるメソッドのための3つの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 に答える