javascript - 单击元素并使用 jQuery 设置为 'Active'

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>