使用基于ajax响应的查询切换类 - Toggle Classes with query based upon ajax response

Toggle Classes with query based upon ajax response

本文关键字：查询响应 ajax | 更新日期: 2024-01-13

我正在使用对functions.php文件的ajax调用来查询数据库，并确定字段"is_recurring"是1还是0。1或0来自下拉选择。根据php函数返回的内容，我试图在显示一些文本的div中添加和删除"hide"类。

有没有更好的方法来编写这些代码？此外，如果我来回选择下拉菜单几次，它似乎会感到困惑，并且无法正确添加/删除类。如有任何建议，我们将不胜感激。

var request = $.ajax({
    type: "POST",
    url: 'inc/functions.php',
    data: {action: "toggle", category:category}
}); 
request.done(function(response){
    if(response == 1) {
        if($('#toggle').hasClass("hide")) {
            $('#toggle').hide().removeClass("hide").fadeIn(900);      
        } else { 
            $('#toggle').fadeOut(900).addClass("hide");
        };
    } else if(response != 1) {
        if($('#toggle').hasClass("hide")) {
            exit;           
        } else {
            $('#toggle').fadeOut(900).removeClass("hide"); 
        };
    };
});

更好的方法是不多次遍历DOM：

request.done(function(response){
    var ele = $('#toggle');
    if(response == 1) {
        if(ele.hasClass("hide")) {
            ele.hide().removeClass("hide").fadeIn(900);      
        } else { 
            ele.fadeOut(900).addClass("hide");
        };
    } else if(response != 1) {
        if(ele.hasClass("hide")) {
            exit;           
        } else {
           ele.fadeOut(900).removeClass("hide"); 
        };
    };
});

尝试：

if(response == 1) {
    $('#toggle').removeClass('.hide').fadeIn();
}
else{
    $('#toggle').addClass('.hide').fadeOut();
}

这是我根据@Tyagi的建议使用的代码，经过了一些修改。

request.done(function(response){
    var ele = $('#toggle');
    if(response == 1) {
        if(ele.hasClass("hide")) {
            ele.hide().removeClass("hide").fadeIn(900);      
        } else { 
            exit;
        };
    } else if(response != 1) {
        if(ele.hasClass("hide")) {
            exit;           
        } else {
           ele.fadeOut(900).addClass("hide"); 
        };
    };
});