Javascript 切换添加为无效跨度属性的图标

我在我的网站上添加了一个按钮，代码如下：

<button class="filter-btn-open">Open <span uk-icon="chevron-down"></span></button>

---

但是，图标是使用属性而不是类添加的。如何实现这一点？

单击可以获得

span

元素，然后切换其属性

向下V形，向上V形

$(document).ready(function() {
  $('.red-btn').click(function() {
    var $span = $(this).find("span");
    if ($span.attr("uk-icon") === "chevron-down") {
      $span.attr("uk-icon", "chevron-up")
    } else {
      $span.attr("uk-icon", "chevron-down")
    }
    $(this).toggleClass("green-btn red-btn");
  });
});

欢迎来到堆栈溢出！请拿着这本书，通读一遍，特别是做你的研究，看看相关的主题，然后试一试。如果你在做了更多的研究和搜索后陷入困境，无法摆脱困境，请发布一份你的尝试，并明确指出你陷入困境的地方。人们会乐意帮忙的。祝你好运旁注：
uk图标是
span
的无效属性。如果要包含自定义属性，建议使用。是否要使用
类
而不是
英国图标
？如果没有，那么如何读取
uk icon
属性以显示图标？我想在切换按钮时切换图标，就像我能够使用类切换样式一样。我希望有一种方法可以在代码-
中将
V形向下
更改为
'V形向上
。令人困惑的是，图标不是使用simple类添加的。我尝试了这个建议，这是我在单击
时得到的。这将不起作用，我想要实现的是
。该类uk图标由框架脚本自动添加。@atsngr my bad。我把
chevron down
当作一个班来读错了。请看我的最新答案。这非常有效。我只调整了
var$span=$（这个）以确保我只针对特定范围。谢谢
$(document).ready(function() {
  $('.red-btn').click(function() {
    var $span = $(this).find("span");
    if ($span.attr("uk-icon") === "chevron-down") {
      $span.attr("uk-icon", "chevron-up")
    } else {
      $span.attr("uk-icon", "chevron-down")
    }
    $(this).toggleClass("green-btn red-btn");
  });
});