Question

我正在使用对我的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"); 
        };
    };
});

Answer 1

更好的方法是不要多次遍历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"); 
        };
    };
});

Answer 2

尝试：

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

Answer 3

根据@ 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"); 
        };
    };
});

使用基于ajax响应的查询切换类

3 个答案: