javascript - 通过 JavaScript 切换按钮上的图标

Question

我设置了一个 Bootstrap 网页，它显示一个可折叠表格。每个表格行都有一个带有 glyphicon-chevron-down 图标的按钮。当用户单击此按钮时，该图标需要更改为glyphicon chevron-up。我尝试了几种不同的方法，但没有成功。

当前设置是:

<script >
    function toggleChevron(button) {
        if (button.find('span').hasClass('glyphicon-chevron-down')) {
            button.find('span').className = "glyphicon glyphicon-chevron-up";
        }
        if (button.find('span').hasClass('glyphicon-chevron-up')) {
            button.find('span').className = "glyphicon glyphicon-chevron-down";
        }
    }
</script>

<button type="button" onclick="toggleChevron(this)" class="btn btn-default">
    <span class="glyphicon glyphicon-chevron-down"></span>
</button>

JSFiddle

Answer 1

这有效:

toggleChevron = function(button) {
  $(button).find('span').toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
}

主要问题是您传递的 this 不是 jQuery 对象，因此您需要将 button 包装在 jQuery 函数 $(按钮)

http://jsfiddle.net/V9LSS/4/