显示/隐藏按钮基于它's以前的状态与jQuery

Show/Hide button based on it's previous state with jQuery

本文关键字：状态 jQuery 隐藏 按钮 于它 显示      更新时间：2023-09-26

我想在用户选中/取消选中复选框时显示一个按钮。对于不同的用户，复选框可以显示为已选中或未选中。如何根据复选框的先前状态显示/隐藏按钮。我当前的代码如下:

$('#receive-msg').on('click',function (){
var btnNoMsg = $('#btn-no-msgs');
   btnNoMsg.removeClass('hide').addClass('hide');
   btnNoMsg.removeClass('hide');
});

我知道我必须将复选框的当前状态存储在某个地方，当再次单击时，将以前的状态与当前状态进行比较，并显示/隐藏按钮。

更新:我用下面的代码解决了这个问题。

 var btnNoMsg = $('#btn-no-msgs');
    var state = $(this).prop('checked');
    var receive = $(this).data('receive');
    var status = receive ? true : false;
    if (state === status){
        btnNoMsg.removeClass('hide').addClass('hide');
    }else{
         btnNoMsg.removeClass('hide');
    }

但是我将使用beautifulocoder提供的代码

使用简单的toggleClass:

$('#receive-msg').on('click', function () {
    $('#btn-no-msgs').toggleClass('hide');
});
相关文章：