Question

我有这个功能，一切都很好，但我再也无法启动它了。能做到这一次只有一次，有什么不对？求助。

$('.bottom_panel_button_05').one('click', function(){
    $(this).css(
        'background-image','url("img/bottom_panel_icons/ap_bottom_panel_back_button_01_135_on.png")',
        'background-position','center center no-repeat'
    ).addClass('panel_blocked');
    $(this).one('click', function(){
        $(this).css(
            'background-image','url("img/bottom_panel_icons/ap_bottom_panel_back_button_01_135.png")',
            'background-position','center center no-repeat'
        ).removeClass('panel_blocked');
    });
});

Answer 1

您在较旧的jQuery版本中使用的是函数.one()而不是.on()（或.delegate()，.live() / .bind()。

Answer 2

    $('.bottom_panel_button_05').on('click', function(){
      if (!$(this).hasClass('panel_blocked')) {
        $(this).css({
          'background-image': 'url("img/bottom_panel_icons/ap_bottom_panel_back_button_01_135_on.png")',
          'background-position': 'center center no-repeat'
        }).addClass('panel_blocked');
      } else {
        $(this).css({
          'background-image': 'url("img/bottom_panel_icons/ap_bottom_panel_back_button_01_135.png")',
          'background-position': 'center center no-repeat'
        }).removeClass('panel_blocked');
      }
    });

Answer 3

看起来您正在尝试切换按钮，在这种情况下，您可以简化代码：

$('.bottom_panel_button_05').on('click', function (){
    var that = $(this);
    if (that.hasClass('panel_blocked') {
        that.css(
            'background-image','url("img/bottom_panel_icons/ap_bottom_panel_back_button_01_135.png")'
        ).removeClass('panel_blocked');
    } else {
        that.css(
            'background-image','url("img/bottom_panel_icons/ap_bottom_panel_back_button_01_135_on.png")'
        ).addClass('panel_blocked');
    }
});

Answer 4

你所做的只是将'_on'切换到图像名称的末尾，并根据元素是否具有该类来切换类，一个简单的方法是：

$('.bottom_panel_button_05').on('click', function (){
    var Is = $(this).is('.panel_blocked');
    $(this).css('background-image','url("img/bottom_panel_icons/ap_bottom_panel_back_button_01_135'+(Is?'':'_on')+'.png")')
           .toggleClass('panel_blocked', !Is);
});

Answer 5

将one更改为live

$('.bottom_panel_button_05').live('click', function(){
    $(this).css(
        'background-image','url("img/bottom_panel_icons/ap_bottom_panel_back_button_01_135_on.png")',
        'background-position','center center no-repeat'
    ).addClass('panel_blocked');
    $(this).live('click', function(){
        $(this).css(
            'background-image','url("img/bottom_panel_icons/ap_bottom_panel_back_button_01_135.png")',
            'background-position','center center no-repeat'
        ).removeClass('panel_blocked');
    });
});

如何重新启动？

5 个答案: