通过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');
}

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

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

Answer 2

您的jsfiddle存在一些错误。 检查控制台。

这是我的做法：

http://jsfiddle.net/V9LSS/5/

var span = $('.glyphicon');

$('.btn').click(function(e){
    if(span.hasClass('glyphicon-chevron-down')) 
        span.removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
    else
        span.removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
});

简化了一点： http : //jsfiddle.net/V9LSS/7/

var span = $('.glyphicon');

$('.btn').click(function(e){
    span.toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
});

Answer 3

尝试这个：

$('button').click(function(e) {
    var $elm = $(this).find('span'),
        cDown = 'glyphicon-chevron-down',
        cUp = 'glyphicon-chevron-up';
    if ($elm.hasClass(cDown)) {
        $elm.removeClass(cDown).addClass(cUp);
    }
    else {
        $elm.removeClass(cUp).addClass(cDown);
    }
});

http://jsfiddle.net/V9LSS/3/

或者，如果您感到胆怯，可以内联所有内容（这是dave的礼貌，请提供）：

<button type="button" onclick="$(this).find('span').toggleClass('glyphicon-chevron-down glyphicon-chevron-up')" class="btn btn-default">
    <span class="glyphicon glyphicon-chevron-down"></span>
</button>

http://jsfiddle.net/V9LSS/9/

Answer 4

    function toggleChevron(button) {
      if ($(button).find('span').hasClass('glyphicon-chevron-down')) {
        $(button).find('span').removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
      }else{
           $(button).find('span').removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
      }
    }

Answer 5

您将dom节点作为参数传递，并尝试在其上使用jquery函数，您需要在onclick（$（this）而不是this）中传递jquery元素。