單擊元素並使用jQuery設置為“有效”

Question

我有一個顯示6個框的簡單腳本。

該計划是當用戶單擊這些框中的任何一個時，它們應變成灰色背景。 但是，這不起作用。 我使用.on嗎？

演示： http ： //jsfiddle.net/szzqe8L1/

 $(".thumb-overlay-content").on('click',function() { $(this).removeClass('rotateOut').addClass('rotateIn'); }, function() { $(this).removeClass('rotateIn').addClass('rotateOut'); }); 

 .thumb-overlay-content { margin:10px; background:#CCC; float:left; text-align:center; padding:50px; } .animated { background:red; } .rotateOut { border:3px solid blue; } .rotateIn { border:3px solid green; background:#ccc; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="thumb-overlay-content animated rotateOut">Box1</div> <div class="thumb-overlay-content animated rotateOut">Box1</div> <div class="thumb-overlay-content animated rotateOut">Box1</div> <div class="thumb-overlay-content animated rotateOut">Box1</div> <div class="thumb-overlay-content animated rotateOut">Box1</div> <div class="thumb-overlay-content animated rotateOut">Box1</div> <div class="thumb-overlay-content animated rotateOut">Box1</div> 

Answer 1

.on('click'需要一個回調函數，該函數說明用戶單擊與選擇器匹配的元素時的操作。

您可以使用.toggleClass()獲得所需的功能。

 $(".thumb-overlay-content").on('click',function() { $(this).toggleClass('rotateOut rotateIn'); }); 

 .thumb-overlay-content { margin:10px; background:#CCC; float:left; text-align:center; padding:50px; } .animated { background:red; } .rotateOut { border:3px solid blue; } .rotateIn { border:3px solid green; background:#ccc; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="thumb-overlay-content animated rotateOut">Box1</div> <div class="thumb-overlay-content animated rotateOut">Box1</div> <div class="thumb-overlay-content animated rotateOut">Box1</div> <div class="thumb-overlay-content animated rotateOut">Box1</div> <div class="thumb-overlay-content animated rotateOut">Box1</div> <div class="thumb-overlay-content animated rotateOut">Box1</div> <div class="thumb-overlay-content animated rotateOut">Box1</div>