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);
        }
    });

});