切換按鈕類別和文本

Question

我正在嘗試使用jquery更改文本和圖標。 當您單擊該按鈕時，它會更改，但是當您再次單擊該按鈕時，它會遇到麻煩。 圖標和文本不會更改回默認值。

后面的代碼

 string box = "<div class=\"alter-Wrp\"> <div class=\"alert alert-danger {0}\">{1}</div></div>";

        if(count > 0)
            litAlert.Text += String.Format(box);

asp.page

<button class="btn btn-dangerr btn-lg"  type="button"><span class="glyphicon glyphicon-bell beee"></span>
             <span class="text">Show Alarm</span> </button>
        <asp:Literal ID="litAlert" runat="server"></asp:Literal>

jQuery的

$('.btn-dangerr').click( function(e) {
        var tgl = $('.btn-dangerr');
        var box2 = $('.alter-Wrp');
        var icon = $('.glyphicon');
        var text = $('.text');
        var toggleClass = '.beee';
        icon.addClass('glyphicon-bell');
        text.text('Show Alarm');
        box2.slideToggle(function (){
            if (tgl.hasClass(toggleClass)) {
                icon.removeClass('glyphicon-bell').addClass('glyphicon-fire');
                text.text('Hide Alarm');

            } else  {
                e.preventDefault();
            }
            $('.btn-dangerr').toggleClass(toggleClass);
        });
});

http://jsfiddle.net/w8Yjz/25/

Answer 1

相當確定這是您要執行的操作：

$('.btn-dangerr').click(function (e) {
    $('.alter-Wrp').slideToggle();
    $('.beee').toggleClass('glyphicon-bell glyphicon-fire');
    if ($('.beee').hasClass('glyphicon-fire')) {
        $('.text').text('Hide Alarm');
    } else {
        $('.text').text('Show Alarm');
    }
});

小提琴