基于Ajax返回结果动态增删图标类的问题求助

核心问题定位 #

• 选择器错误：HTML中容器的id为iconforPay，但原JS代码使用了类选择器$(".iconforPay")，无法定位到目标元素，导致图标无法渲染。
• 旧图标未清除：每次执行逻辑时直接追加新图标，会造成旧图标残留，多次调用后出现图标叠加问题。

修正后的JavaScript代码 #

// 先移除容器内所有已存在的图标元素
$("#iconforPay i").remove();

if (direc == 0) {
  console.log("true");
  document.getElementById('PaymentStatus').innerHTML = "Payment Completed";
  $("#iconforPay").append('<i class="bi bi-check-circle-fill font-24 color-green-dark"></i>');
} else {
  console.log("false");
  document.getElementById('PaymentStatus').innerHTML = "Payment Pending";
  $("#iconforPay").append('<i class="bi bi-hourglass-top-fill font-24 color-red-dark"></i>');
}

额外排查要点 #

如果修正后图标仍不显示，请确认：

• 项目中已正确引入Bootstrap Icons的CSS资源，确保图标类能被浏览器识别。
• 图标类名拼写无误，比如bi-check-circle-fill需匹配你使用的Bootstrap Icons版本。

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