如何使用 JavaScript 动态更新 FontAwesome 图标

在您提供的代码中，变量love的初始值为字符串""far fa-heart""，在goods_like()函数中，当love的值为""far fa-heart""时，将其赋值为""fas fa-heart""，否则将其赋值为""fas fa-heart""。然后，通过document.getElementById('like').innerHTML = love;将love的值赋给id为like的按钮的innerHTML属性。\n\n然而，根据您提供的代码，love变量的值并没有影响到<i>标签的class属性。这是因为<i>标签的class属性是在HTML静态加载时根据{{ love }}这个占位符确定的。在这种情况下，您需要使用一些模板引擎或JavaScript框架来动态地渲染HTML标签的class属性。\n\n您可以尝试使用一些现成的模板引擎（如Handlebars、EJS等）或JavaScript框架（如Vue.js、React等）来实现这个功能。这些工具可以让您在HTML中使用特定的语法（如双括号{{}}）来动态地渲染变量的值。\n\n以下是使用Handlebars模板引擎的示例代码：\n\n在HTML中，您可以将<button>标签改为以下形式：\n\nhtml\n<button id="like" onclick="goods_like()"> <i class="{{love}}"></i> </button>\n\n\n然后，在JavaScript中，您可以使用Handlebars模板引擎来渲染HTML：\n\njavascript\n// 引入Handlebars库\n\n// 定义模板\nvar template = Handlebars.compile(document.getElementById("like-button-template").innerHTML);\n\n// 定义数据\nvar data = {\n love: love\n};\n\n// 渲染HTML\ndocument.getElementById("like-button-container").innerHTML = template(data);\n\n\n最后，在HTML中，您需要添加一个容器元素来放置渲染后的按钮：\n\nhtml\n<div id="like-button-container"></div>\n\n\n这样，当love变量的值改变时，按钮的class属性将会动态地更新，从而显示正确的FontAwesome图标。