Question

am尝试将ajax方法显示的当前数据替换为另一个函数的结果，在第一种方法中，我使用了“追加”方法，并尝试用replaceWith函数更新新结果，但是问题是，它仅显示一个值。

使用append方法显示：

 <script>
        $(document).ready(function () {
            function test() {
                $.ajax({
                    url: "WomenData",
                    method: "GET",
                    //data: { minimum_range: minimum_range, maximum_range: maximum_range },
                    success: function (vlist) {
                        for (var i in vlist) {

                        $('#card-group').append($('<div class="col-lg-3 col-sm-6 p-0"><div class="card product-men p-3"><div class="men-thumb-item"><img src="' + vlist[i].img1 + '" id="imgfront" class="card-img-top"><div class="men-cart-pro"><div class="inner-men-cart-pro"><a href="#" id="quickview" class="link-product-add-cart">Quick View</a>/</div></div></div><!-- card body --><div class="card-body  py-3 px-2"><h5 class="card-title text-capitalize" id="mname">' + vlist[i].mname + '</h5><div class="card-text d-flex justify-content-between"><p class="text-dark font-weight-bold" id="mprize">' + vlist[i].mprize + '</p><p class="line-through" id="mdprize">' + vlist[i].mdprize + '</p></div></div><!-- card footer --><div class="card-footer d-flex justify-content-end"><h3> <a href="Purchase/AddToCarts?mid='+vlist[i].mid+',mrate='+vlist[i].mrate+'" class="hub-cart phub-cart btn">Add To Cart</a></h3></div></div></div>'));
                                          }
                }
            });

        }
        window.onload = test();
    });

使用replaceWith方法更新

function load_product(minimum_range, maximum_range) {
                $.ajax({
                    url: "Women",
                    method: "POST",
                    data: { minimum_range: minimum_range, maximum_range: maximum_range },
                    success: function (vlist) {
                        for (var i in vlist) 
                        {
                            $('#card-group').replaceWith($('<div class="col-lg-3 col-sm-6 p-0"><div class="card product-men p-3"><div class="men-thumb-item"><img src="' + vlist[i].img1 + '" id="imgfront" class="card-img-top"><div class="men-cart-pro"><div class="inner-men-cart-pro"><a href="#" id="quickview" class="link-product-add-cart">Quick View</a>/</div></div></div><!-- card body --><div class="card-body  py-3 px-2"><h5 class="card-title text-capitalize" id="mname">' + vlist[i].mname + '</h5><div class="card-text d-flex justify-content-between"><p class="text-dark font-weight-bold" id="mprize">' + vlist[i].mprize + '</p><p class="line-through" id="mdprize">' + vlist[i].mdprize + '</p></div></div><!-- card footer --><div class="card-footer d-flex justify-content-end"><h3> <a href="Purchase/AddToCarts?mid=' + vlist[i].mid + ',mrate=' + vlist[i].mrate + '" class="hub-cart phub-cart btn">Add To Cart</a></h3></div></div></div>'));

                        }

                    }

Answer 1

顾名思义，append并不关心div已经拥有的内容，并会继续在div中推送内容。

尽管replaceWith方法每次都会删除div的旧内容，然后添加新内容，从而使数组的最后一个索引成为div $('#card-group')的内容

这是正确的解决方案。只需在循环外清空div，然后将其追加

$(document).ready(function () {
        function test() {
            $.ajax({
                url: "WomenData",
                method: "GET",
                //data: { minimum_range: minimum_range, maximum_range: maximum_range },
                success: function (vlist) {
                $('#card-group').empty();

                    for (var i in vlist) {

                    $('#card-group').append($('<div class="col-lg-3 col-sm-6 p-0"><div class="card product-men p-3"><div class="men-thumb-item"><img src="' + vlist[i].img1 + '" id="imgfront" class="card-img-top"><div class="men-cart-pro"><div class="inner-men-cart-pro"><a href="#" id="quickview" class="link-product-add-cart">Quick View</a>/</div></div></div><!-- card body --><div class="card-body  py-3 px-2"><h5 class="card-title text-capitalize" id="mname">' + vlist[i].mname + '</h5><div class="card-text d-flex justify-content-between"><p class="text-dark font-weight-bold" id="mprize">' + vlist[i].mprize + '</p><p class="line-through" id="mdprize">' + vlist[i].mdprize + '</p></div></div><!-- card footer --><div class="card-footer d-flex justify-content-end"><h3> <a href="Purchase/AddToCarts?mid='+vlist[i].mid+',mrate='+vlist[i].mrate+'" class="hub-cart phub-cart btn">Add To Cart</a></h3></div></div></div>'));
                                      }
            }
        });

    }
    window.onload = test();
});

Answer 2

您是否尝试过在jQuery中使用.html（）方法替换整个内容？

语法：

string

示例：

char *

带有模板文字的动态：

strings

Answer 3

谢谢大家，我尝试过的操作几乎与第一个答案相同，但是我没有在第一次加载时清空父div，而是将其放在Json结果代码块中，并且还用“ append”更改了“ replaceWith”

 $.ajax({
                    url: "Women",
                    method: "POST",
                    data: { minimum_range:ui.values[0], maximum_range:ui.values[1] },
                    success: function (vlist) {
                        $('#card-group').empty();
                        for (var i in vlist) {

                            $('#card-group').append($('<div class="col-lg-3 col-sm-6 p-0"><div class="card product-men p-3"><div class="men-thumb-item"><img src="' + vlist[i].img1 + '" id="imgfront" class="card-img-top"><div class="men-cart-pro"><div class="inner-men-cart-pro"><a href="#" id="quickview" class="link-product-add-cart">Quick View</a>/</div></div></div><!-- card body --><div class="card-body  py-3 px-2"><h5 class="card-title text-capitalize" id="mname">' + vlist[i].mname + '</h5><div class="card-text d-flex justify-content-between"><p class="text-dark font-weight-bold" id="mprize">' + vlist[i].mprize + '</p><p class="line-through" id="mdprize">' + vlist[i].mdprize + '</p></div></div><!-- card footer --><div class="card-footer d-flex justify-content-end"><h3> <a href="Purchase/AddToCarts?mid=' + vlist[i].mid + ',mrate=' + vlist[i].mrate + '" class="hub-cart phub-cart btn">Add To Cart</a></h3></div></div></div>'));


                        }


                    }
                });

为什么JQuery中的'replaceWith'函数没有完全替换数据？

3 个答案: