jQuery addclass removeclass onclick（不會重復事件更多次）

Question

網站： http ： //art.smartcredit.md/flowers1/

單擊按鈕后：“在房間中查看”->“返回到相冊”->“查看房間”（無重復單擊），單擊按鈕后：“在房間中查看”->“返回到相冊”->“在房間中查看”（無需重復單擊）

$(function(){
$('.button1').on('click', function(){
  $('div .textwidget').first().css({
    'background': 'url(http://art.smartcredit.md/wp-content/uploads/2015/04/view_in_room_couch_plant.jpg)',
    'background-size': '133%',
    'height': '520px'
  });

  $('.textwidget img').first().css({
    'transform': 'scale(0.4)',
    'transition': '1s',
    'margin-left': '-25px'
  });

  $('.button1').empty().prepend("<button class='btn btn-primary'>BACK TO ATWORK</button>");

  $('.button1').addClass('back').removeClass('button1');
// Click Button Back To Atwork
  $('.back').on('click', function(){
    $('div .textwidget').first().css({
      'background': 'none',
      'height': '100%'
    });

    $('.textwidget img').first().css({
      'transform': 'scale(1)',
      'transition': '1s',
      'margin-left': '0px'  
    }); 

    $('.back').empty().prepend("<button class='btn btn-primary'>VIEW IN A ROOM</button>");

    $('.back').addClass('button1').removeClass('back');
  });
});
  });

Answer 1

與其像您一樣使用循環類分配，為什么不將當前狀態保存在變量中？ 例如：

// Store current state in a simple variable
var isZoomedIn = false;

$('.button1').click(function(){
    if(isZoomedIn) {
        // Zoom it out
        $('div .textwidget').first().css({
          'background': 'none',
          'height': '100%'
        });

        $('.textwidget img').first().css({
          'transform': 'scale(1)',
          'transition': '1s',
          'margin-left': '0px'  
        }); 

        $(this).text('VIEW IN A ROOM');
    }
    else {
        // Zoom it in
        $('div .textwidget').first().css({
          'background': 'url(http://art.smartcredit.md/wp-content/uploads/2015/04/view_in_room_couch_plant.jpg)',
          'background-size': '133%',
          'height': '520px'
        });

        $('.textwidget img').first().css({
          'transform': 'scale(0.4)',
          'transition': '1s',
          'margin-left': '-25px'
        });

        $(this).text('BACK TO ARTWORK');
    }
});