Question

我有2个不同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是改变颜色

Answer 1

您可以使用toggleClass切换多个类..

＆＃13;

$('.red,.blue').click(function() {
  $(this).toggleClass('red blue');
});

＆＃13;

.red { background-color:red }
.blue { background-color:blue }

＆＃13;

<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>

＆＃13;

Answer 2

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

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

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

Answer 3

您可以使用选择器"[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>

Answer 4

使用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;
}

Answer 5

点击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);
});

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

5 个答案: