jQuery的addclass removeclass的onclick（不重複的事件多次）

Question

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

後點擊按鈕： 「VIEW在一個房間裏」 - > 「BACK TO ATWORKS」 - > 「VIEW一室」（無重複點擊） 後點擊按鈕： 「VIEW在一個房間裏」 - > 「BACK TO ATWORKS」 - > 「VIEW一室」（無重複點擊）

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