如何使用 JavaScript 在单击时将 CSS styles 添加到列表元素，但在单击另一个 li 项目时将其删除？

Question

我有 JavaScript 使 li 元素在侧边栏中作为类别选择器的一部分被单击时加粗并加下划线。

代码在这里：

  $('li').click(function(e){
    $(this).css('font-weight','bold');
  $(this).css('text-decoration','underline');
})

我正在使用 Hubspot 和侧边栏的代码，有人可以在其中手动设置类别名称，然后将其应用于列表元素以进行排序：

<ul class="category-sidebar">
        {% for item in module.poll_sidebar_categories %}
        <li class="{{ item.poll_sidebar_category }}">{{ item.poll_sidebar_category }}</li>
        {% endfor %}
      </ul>

我可以根据需要为背景添加更多代码，但边栏显示如下：

唯一的问题是即使我单击其他选项（如“全部”或显示类别“保留”等），此代码仍然存在。 我怎样才能让 css 在单击不同的 li 项目后不应用，然后 styles 仅应用于新的 li 项目？

我试图更改为 href 或将其添加到 li 标签中，但它不适用于其他 JS，所以我想看看这是否可能作为列表项

Answer 1

var ul = document.getElementsByClassName("category-sidebar");
var li = document.createElement("li");
li.classList.add("[your_new_category]");
li.innerHTML = "your_new_category"
ul.appendChild(li);

您必须创建 javascript 个元素并将其添加到父节点。

让我们首先通过它的类名引用我们的 object 接下来在 dom 集合类名中创建新的 li 元素，我假设你在你的 js append 中有你的新类别名称，从第一行新创建 li 到我们的 ul 元素。

希望这可以帮助