jQuery仅附加一个ajax响应

Question

我有将ajax request发送到json-server并发送回ajax request代码，该代码将使用jquery .html()显示到html div 。 该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);
        }
    });

});