js 添加删除class样式

1、html前端

<button type="button" class="btn btn-light-primary m-1">
	<i class='bx bx-edit'></i>
</button>
<button type="button" class="btn btn-light-secondary m-1" id="btn">
    // 图标样式
	<i class='bx bx-right-top-arrow-circle'></i>
</button>

 2、现在想要将右边图标改为下面红框中的图标

 3、实现图标切换，需要更改class属性，将“<i class='bx bx-right-top-arrow-circle'></i>”中的“bx bx-right-top-arrow-circle”更改为“bx bx-right-down-arrow-circle”。

// 点击button按钮
$(document).on("click", "#btn", function () {
    // 先删除原有的class样式，在添加新的样式
    $('#btn i').removeClass("bx bx-right-top-arrow-circle").addClass("bx bx-right-down-arrow-circle");
});

4、其中：

// 删除原有样式
$('#btn i').removeClass("bx bx-right-top-arrow-circle");
// 添加需要的样式
$('#btn i')..addClass("bx bx-right-down-arrow-circle");