Question

我的网站上有一个按钮，其中添加了以下代码：

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

该按钮的图标添加了一个图标：<span uk-icon="chevron-down"></span>作为默认状态。但是，我想在单击按钮时将该图标与另一个图标<span uk-icon="chevron-up"></span>切换。我已经使用下面的代码更改了按钮的颜色，但我也需要能够更改图标。

$(document).ready(function () {
    $('.red-btn').click(function () {
        $(this).toggleClass("green-btn red-btn" );
    });
});

然而，使用属性而不是类添加图标。我怎样才能做到这一点？

Answer 1

点击后，您可以获取span元素，然后切换其属性chevron-down chevron-up。

$(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");
  });
});

切换添加为无效范围属性

1 个答案: