jquery仅附加一个ajax响应

Question

我有代码将ajax request发送到json-server并发送请求，将使用html div显示到jquery .html()。 div中显示的数据取决于用户clicks的按钮。使用.append很好地附加，但只是添加到显示的现有数据，因此显示不属于同一类别的数据。下面是代码

这应该在点击时将所有类别都归入软件类别

$(".software").click(function () {
    $(this).addClass('active');
    $('.music').removeClass('active');
    $('.fashion').removeClass('active');
    $('.business').removeClass('active');
    $('.life').removeClass('active');
    $('.digital').removeClass('active');
    $('.write').removeClass('active');
    var soft = 'Software Engineering';
    $.ajax({
        method: 'GET',
        url: `http://localhost:3000/users?category=${soft}`,
        dataType: 'JSON',
        success: function (res) {
            console.log(res);
            $.each(res, function (idex, value) {

                usercat = "";
                usercat += `<div id="make-3D-space">`;
                usercat += `<div id="product-card">`;
                usercat += `<div id="product-front">`;
                usercat += `<div class="shadow"></div>`;
                usercat += `<img class="slateImg" src="${value.coverimage}" alt="" />`;
                usercat += `<div class="image_overlay">`;
                usercat += `<div class="product-options">`;
                usercat += `<span><strong><i class="mdi mdi-phone"></i> </strong>${value.phonenumber}</span>`;
                usercat += `<span><strong><i class="mdi mdi-email"></i></strong>${value.email}</span>`;
                usercat += `<span><strong><i class="mdi mdi-newspaper"></i></strong>${value.description}</span>`;
                usercat += `</div>`;
                usercat += `</div>`;
                usercat += `<div class="stats">`;
                usercat += `<div class="stats-container">`;
                usercat += `<span class="product_price">$${value.price}</span>`;
                usercat += `<a href="feeds.html?view=${value.username}"><span class="product_name">${value.username}</span></a>`;
                usercat += `<p>${value.category}</p>`;
                usercat += `</div>`;
                usercat += `</div>`;
                usercat += `</div>`;
                usercat += `</div>`;
                usercat += `</div>`;

                $("#featuredView").html(usercat);
            });
        }
    });
});

这应该在点击时将所有类别都归入时尚类别

$('.fashion').click(function () {
    $(".featuredView").html();
    $(this).addClass('active');
    $('.music').removeClass('active');
    $('.software').removeClass('active');
    $('.business').removeClass('active');
    $('.life').removeClass('active');
    $('.digital').removeClass('active');
    $('.write').removeClass('active');
    var fashion = 'Fashion';
    $.ajax({
        method: 'GET',
        url: `http://localhost:3000/users?category=${fashion}`,
        dataType: 'JSON',
        success: function (res) {
            console.log(res);
            $.each(res, function (idex, value) {

                usercat = "";
                usercat += `<div id="make-3D-space">`;
                usercat += `<div id="product-card">`;
                usercat += `<div id="product-front">`;
                usercat += `<div class="shadow"></div>`;
                usercat += `<img class="slateImg" src="${value.coverimage}" alt="" />`;
                usercat += `<div class="image_overlay">`;
                usercat += `<div class="product-options">`;
                usercat += `<span><strong><i class="mdi mdi-phone"></i> </strong>${value.phonenumber}</span>`;
                usercat += `<span><strong><i class="mdi mdi-email"></i></strong>${value.email}</span>`;
                usercat += `<span><strong><i class="mdi mdi-newspaper"></i></strong>${value.description}</span>`;
                usercat += `</div>`;
                usercat += `</div>`;
                usercat += `<div class="stats">`;
                usercat += `<div class="stats-container">`;
                usercat += `<span class="product_price">$${value.price}</span>`;
                usercat += `<a href="feeds.html?view=${value.username}"><span class="product_name">${value.username}</span></a>`;
                usercat += `<p>${value.category}</p>`;
                usercat += `</div>`;
                usercat += `</div>`;
                usercat += `</div>`;
                usercat += `</div>`;
                usercat += `</div>`;

                $("#featuredView").html(usercat);
            });
        }
    });

});

问题是数据库中的时尚类别有多个数据，单击时尚时只显示一个。但是，如果我使用.append()显示所有数据，但使用追加，所有数据显示，但当我点击软件按钮时，软件中的数据显示已经显示的方式的侧面数据。

我希望当我点击任一按钮时，该特定类别中的所有数据都会显示。谢谢。

Answer 1

在添加到div之前，您需要清除所有数据。在console.log之后添加此行

$("#featuredView").html('');

Answer 2

对于上面的代码看起来很好但是。应该声明usercat外部循环并附加到div外部循环

$('.fashion').click(function () {
    $(".featuredView").html();
    $(this).addClass('active');
    $('.music').removeClass('active');
    $('.software').removeClass('active');
    $('.business').removeClass('active');
    $('.life').removeClass('active');
    $('.digital').removeClass('active');
    $('.write').removeClass('active');
    var fashion = 'Fashion';
    $.ajax({
        method: 'GET',
        url: `http://localhost:3000/users?category=${fashion}`,
        dataType: 'JSON',
        success: function (res) {
            console.log(res);
            var usercat = "";
            $.each(res, function (idex, value) {


                usercat += `<div id="make-3D-space">`;
                usercat += `<div id="product-card">`;
                usercat += `<div id="product-front">`;
                usercat += `<div class="shadow"></div>`;
                usercat += `<img class="slateImg" src="${value.coverimage}" alt="" />`;
                usercat += `<div class="image_overlay">`;
                usercat += `<div class="product-options">`;
                usercat += `<span><strong><i class="mdi mdi-phone"></i> </strong>${value.phonenumber}</span>`;
                usercat += `<span><strong><i class="mdi mdi-email"></i></strong>${value.email}</span>`;
                usercat += `<span><strong><i class="mdi mdi-newspaper"></i></strong>${value.description}</span>`;
                usercat += `</div>`;
                usercat += `</div>`;
                usercat += `<div class="stats">`;
                usercat += `<div class="stats-container">`;
                usercat += `<span class="product_price">$${value.price}</span>`;
                usercat += `<a href="feeds.html?view=${value.username}"><span class="product_name">${value.username}</span></a>`;
                usercat += `<p>${value.category}</p>`;
                usercat += `</div>`;
                usercat += `</div>`;
                usercat += `</div>`;
                usercat += `</div>`;
                usercat += `</div>`;

            });

            $("#featuredView").html(usercat);
        }
    });

});