Jquery addClass removeClass 如果点击相同 class
Jquery addClass removeClass if clicking same class
下面的代码有效。我还想补充一点,如果 .hero-build-wrap 已经将 class 添加到 hero-build ,并且您再次单击它会将其删除。
我尝试使用 .toggleclass 而不是 .addClass 但没有用
$(function() {
$(".hero-build-wrap").click(function() {
$(".hero-build").removeClass("hero-selected");
$(this).children(".hero-build").addClass("hero-selected");
});
});
HTML:
<div class="hero-build-wrap">
<a class="hero-mini hero-mini-assa">
<img class="hero-hover-big" src="">
<img class="hero-hover-small"src=">
</a>
<div class="hero-build hero-selected">
<a href="">
<p>This is a test</p>
</a>
<a href="">
<p>Anothertest</p>
</a>
</div>
</div>
删除添加 class
的行
$(function() {
$(".hero-build-wrap").click(function() {
$(this).children(".hero-build").toggleClass("hero-selected");
});
});
如果您添加 class ,然后切换 class ,最终结果将是取消添加它
话虽如此,您可能还试图在其他地方删除 class,因为 $().children
是一个非常奇怪的调用
如果是这样,您可以执行以下操作:
$(function() {
$(".hero-build-wrap").click(function() {
var $children = $(this).children(".hero-build").toggleClass("hero-selected");
$('.hero-selected').not($children).removeClass("hero-selected");
});
});
下面的代码有效。我还想补充一点,如果 .hero-build-wrap 已经将 class 添加到 hero-build ,并且您再次单击它会将其删除。 我尝试使用 .toggleclass 而不是 .addClass 但没有用
$(function() {
$(".hero-build-wrap").click(function() {
$(".hero-build").removeClass("hero-selected");
$(this).children(".hero-build").addClass("hero-selected");
});
});
HTML:
<div class="hero-build-wrap">
<a class="hero-mini hero-mini-assa">
<img class="hero-hover-big" src="">
<img class="hero-hover-small"src=">
</a>
<div class="hero-build hero-selected">
<a href="">
<p>This is a test</p>
</a>
<a href="">
<p>Anothertest</p>
</a>
</div>
</div>
删除添加 class
的行$(function() {
$(".hero-build-wrap").click(function() {
$(this).children(".hero-build").toggleClass("hero-selected");
});
});
如果您添加 class ,然后切换 class ,最终结果将是取消添加它
话虽如此,您可能还试图在其他地方删除 class,因为 $().children
是一个非常奇怪的调用
如果是这样,您可以执行以下操作:
$(function() {
$(".hero-build-wrap").click(function() {
var $children = $(this).children(".hero-build").toggleClass("hero-selected");
$('.hero-selected').not($children).removeClass("hero-selected");
});
});