jQuery仅附加一个ajax响应

时间:2019-03-14 03:32:43

标签: javascript jquery html

我有将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()时全部显示,但使用追加,则显示所有数据,但是当我单击软件按钮时,软件中的数据会以已经显示的方式与辅助数据一起显示。

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

2 个答案:

答案 0 :(得分:0)

在添加到div之前,您需要清除所有数据。在您的console.log

之后添加此行

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

答案 1 :(得分:0)

对于您上面的代码,看起来不错但是。应该在循环外声明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);
        }
    });

});