jquery - 重置按钮状态

Question

在我的网站上，我在表格的标题中有 4 个 css 样式的按钮。单击每个按钮时，它当前会根据以下脚本正确更改 css(以下代码可能不是我实现此结果的最简单/最有效的方法)。

我想要实现的是类似于单选按钮的功能，当单击 4 个按钮中的每一个时，修改后的类将重置到先前单击的按钮上。

JQUERY:

$(document).ready(function(){
    $(".red-btn.pcb").click(function(){

        $(this).removeClass("red-btn");

        $(this).addClass("redsort-btn");

    });
        $(".blue-btn.pcb").click(function(){

        $(this).removeClass("blue-btn");

        $(this).addClass("bluesort-btn");

    });


        $(".green-btn.pcb").click(function(){

        $(this).removeClass("green-btn");

        $(this).addClass("greensort-btn");

    });


         $(".orange-btn.pcb").click(function(){

        $(this).removeClass("orange-btn");

        $(this).addClass("orangesort-btn");

    });

});

HTML:

 <th><a class="red-btn pcb"><span> Red </span> </a><th>
 <th><a class="blue-btn pcb"><span> Blue </span> </a><th>
 <th><a class="green-btn pcb"><span> Green </span> </a><th>
 <th><a class="orange-btn pcb"><span> Orange </span> </a><th>

Answer 1

如果您可以将“排序”变成它自己的类，您可以执行如下操作:

$("a.pcb").click(function(){
  $(this)
    .addClass("sort").closest("th").siblings("th")
    .find("a").removeClass("sort");
});

然后稍微修改你的CSS:

.orangesort-btn  { font-weight:bold }

到

.orange-btn.sort { font-weight: bold }