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');
    }
});

Fiddle

切换按钮类和文本

1 个答案: