如何在Blazor中通过点击按钮切换CSS类？

以下是通过onclick事件实现按钮图标类切换的代码实现：

HTML 代码 #

<button id="@m.TargetCo.ButtonId" onclick="glyphChanger(this.id)" class="btn btn-default iconButton glyphicon glyphicon-chevron-right"></button>

JavaScript 代码 #

function glyphChanger(buttonID) {
    $("#" + buttonID).toggleClass('glyphicon-chevron-right glyphicon-chevron-up');
}

代码说明 #

• 按钮点击时，onclick事件触发glyphChanger函数并传入按钮的id参数
• 借助jQuery的toggleClass方法，在glyphicon-chevron-right和glyphicon-chevron-up两个类之间切换，从而实现图标箭头方向的切换效果

优化方案 #

如果想避免全局函数，还可以直接用jQuery绑定点击事件，无需传递id，代码更简洁：

<button id="@m.TargetCo.ButtonId" class="btn btn-default iconButton glyphicon glyphicon-chevron-right"></button>

$("#@m.TargetCo.ButtonId").click(function() {
    $(this).toggleClass('glyphicon-chevron-right glyphicon-chevron-up');
});

这里直接通过DOM元素绑定点击事件，this直接指向当前点击的按钮，无需额外获取id，逻辑更清晰。

内容的提问来源于stack exchange，提问作者Bhav