切换CSS类每次用户点击- Jquery

Switch CSS class everytime user clicks - Jquery

本文关键字：Jquery 用户 CSS 切换      更新时间：2023-09-26

我有两个不同的CSS类链接。每次用户点击时，我如何在两者之间进行切换?

<a class="class1" id="class1">Class1</a>
<a class="class2" id="class2">Class2</a>

它只是工作一次，但当我点击第二次，它不工作:

$("#class1").click(function(){
    $("#class1").removeClass().addClass("class2");
    $("#class2").removeClass().addClass("class1");
})
$("#class2").click(function(){
    $("#class1").removeClass().addClass("class2");
    $("#class2").removeClass().addClass("class1");
})

CSS是用来改变颜色的

方法做同样的事情。您为两个标记设置了相同的类，这就是为什么它只在第一次工作。第二次它只是重置当前类。他们不应该是这样的吗?

$("#class1").click(function(){
    $("#class1").removeClass().addClass("class2");
    $("#class2").removeClass().addClass("class1");
})
$("#class2").click(function(){
    $("#class1").removeClass().addClass("class1");
    $("#class2").removeClass().addClass("class2");
})

可以使用toggleClass切换多个类。

$('.red,.blue').click(function() {
  $(this).toggleClass('red blue');
});
.red { background-color:red }
.blue { background-color:blue }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="red">One</div>
<div class="blue">Blue</div>

您可以使用选择器"[class^=class]"来选择Element.className以"class"开头的元素;使用.slice()和参数0, -1来选择字符串中的字符，直到最后一个字符;使用==相等运算符检查最后一个字符是否为1或2;设置匹配1: "2", 2: "1"的最后一个字符与Element.className的最后一个字符相反

$("[class^=class]").click(function() {
  var c = this.className;
  this.className = c.slice(0, -1) + (c[c.length - 1] == 1 ? 2 : 1);      
});
.class1 {
  color: blue;
}
.class2 {
  color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="class1" id="class1">Class1</a>
 <a class="class2" id="clas2">Class2</a>

使用toggleClass JSFIDDLE:https://jsfiddle.net/kameeshwaran/5puecqeq/完成

HTML: 

<a class="class1" id="class1">Class1</a>
<a class="class1" id="class2">Class2</a>

JS 

 $(document).ready(function(){
    $(".class1").click(function(e){
      e.preventDefault();
        $(this).toggleClass("class2")
    });
 });
CSS: 

.class1{
  background-color:green; 
}
.class2{
  background-color:red;
}

当您点击一次class1时，它将从class1中删除class1类，并将class2放在上面。

但是，当您再次点击它时，因为class1被设置为class2类，所以它不会改变。

你应该这样做:

var class1check = 0;
$("#class1").click(function() {
    if (class1check === 0) {
        var addclass1 = "class2";
        var addclass2 = "class1";
    }
    else {
        var addclass1 = "class1";
        var addclass2 = "class2";
        class1check = 0;
    }
    $("#class1").removeClass().addClass(addclass1);
    $("#class2").removeClass().addClass(addclass2);
});
相关文章：