在 jquery 中单击事件比较

Question

是否可以将以下代码应用为单选按钮逻辑？

例如，将toggleClass应用于唯一单击的div，而不是应用于每个div(就像使用单选按钮一样(。我想必须比较点击哪一个，但是如何？

文件已保存到：https://www.w3schools.com/code/tryit.asp?filename=FQ5T80AAQUC9

$('#C1,#C2,#C3').click(function(e) {
        $(this).toggleClass('w3-light-gray w3-green');
    });

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div id="C1" class='w3-light-gray'><i> THIS IS div 1</i> </div ><br><br>
<div id="C2" class='w3-light-gray'><i>THIS IS div 2</i> </div ><br><br>
<div id="C3" class='w3-light-gray'><i> THIS IS div 3</i> </div >

Answer 1

单击div时，检查它是否具有类w3-green，如果没有，则从具有该类的div中删除该类并将其分配给当前div：

$('#C1,#C2,#C3').click(function(e) {
    var $this = $(this);
    if(!$this.hasClass("w3-green")) {
        $(".w3-green").toggleClass('w3-light-gray w3-green');
        $this.toggleClass('w3-light-gray w3-green');
    }
});

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div id="C1" class='w3-light-gray'><i> THIS IS div 1</i> </div ><br><br>
<div id="C2" class='w3-light-gray'><i>THIS IS div 2</i> </div ><br><br>
<div id="C3" class='w3-light-gray'><i> THIS IS div 3</i> </div >

Answer 2

简单的解决方案是在切换单击的元素之前从所有元素中删除突出显示。 只需在切换类之前添加此行：

$('#C1,#C2,#C3').removeClass('w3-green').addClass('w3-light-gray');

$('#C1,#C2,#C3').click(function(e) {
        $('#C1,#C2,#C3').removeClass('w3-green').addClass('w3-light-gray');
        $(this).toggleClass('w3-light-gray w3-green');
});

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div id="C1" class='w3-light-gray'><i> THIS IS div 1</i> </div ><br><br>
<div id="C2" class='w3-light-gray'><i>THIS IS div 2</i> </div ><br><br>
<div id="C3" class='w3-light-gray'><i> THIS IS div 3</i> </div >