如何使用jQuery在两个元素之间切换类

how to switch class between two elements using jQuery

本文关键字：元素 两个 之间 jQuery 何使用      更新时间：2024-01-15

我想这个问题可能已经被问过了，但我找不到任何有效的答案，也找不到反映我问题的问题。我的问题是，我目前有两个<div>，我希望它们在onClick事件后切换类
例如，当我点击一个div时，我希望它有一个名为isSelected的类，如果第二个div有这个类，我希望删除它。我不只是希望点击的div切换isSelected，我希望另一个div"松散"它是isSelected类。

您可以简单地使用类选择器来针对具有特定类的任何元素，并将其删除…

$("#myDiv").on("click", function() {
    $(".isSelected").removeClass("isSelected");
    $(this).addClass("isSelected");
});

无论你有多少可选的div，这都会起作用。。。

尝试

$(".divclass").click(function(){
   $(".divclass").removeClass("isSelected");
   $(this).addClass("isSelected");
});

假设这两个同级具有相同的类divclass

$("div").click(function(){
   $("div").removeClass("isSelected");
   $(this).addClass("isSelected");
});
.isSelected {
    background-color:red; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="">test 1</div>
<div class="">test 2</div>
<div class="">test 3</div>

假设一个div始终具有可以使用的类

$("#myDiv").on("click", function() {
    $('#div1, #div2').toggleClass('isSelected');
})

这应该可以满足您的需要。

$("div").click(function(){
   $("div").removeClass("isSelected");
   $(this).addClass("isSelected");
});
.isSelected {
    background-color:blue; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="">1</div>
<div class="">2</div>
<div class="">3</div>

相关文章：