Question

我有4 divs这样，有work课程：

<div class="work">
    <img src="panda.jpg">
    <h3>Panda</h3>
    <p>Panda eats apple.</p>
</div>

我想切换clicked课程，点击div：

.clicked {
 font-size: 25px;
}

怎么做？

Answer 1

jquery中有一个名为toggleClass的函数。

您应该将click事件附加到div，然后使用this引用所单击的元素。

$('.work').click(function() {    // edited: from $(.work) to $('.work')
    $(this).toggleClass("click")
})

Answer 2

$('.work').on('click', function() {
    $(this).toggleClass('clicked');
})

Geez，为什么你不能去查看文档！

Answer 3

Jquery有一个方法。

$('.work').click(function(e) {
    $(e.target).closest('.work').toggleClass('clicked');
});

如果点击已在所包含的图片等上注册，则.closest()

Answer 4

如果您只希望其中一个div与班级.work同时拥有.clicked班级，请执行以下操作：

$('.work').on('click', function() {    //When the div 'work' is clicked

   $('.work').removeClass('clicked'); //Remove the class 'clicked' from all divs named 'work'

   $(this).addClass('clicked');     //Add the class 'clicked' to the div that was clicked.

});

这是一个fiddle。

Answer 5

您可以使用解决方案https://jsfiddle.net/7ep3e4gn/

$('div.work').click(function(){    
   $(this).addClass('clicked').siblings('div.work').removeClass('clicked');
});

.clicked {
 font-size: 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="work">
    <img src="panda.jpg">
    <h3>Panda</h3>
    <p>Panda eats apple.</p>
</div>
<div class="work">
    <img src="panda.jpg">
    <h3>Panda2</h3>
    <p>Panda2 eats apple.</p>
</div>
<div class="work">
    <img src="panda.jpg">
    <h3>Panda3</h3>
    <p>Panda3 eats apple.</p>
</div>

我使用了addClass＆amp; removeClass以及jQuery 兄弟姐妹方法。

希望这会对你有所帮助。

如何知道单击了哪个元素并将类切换到它？ JS Jquery

5 个答案: