通过JavaScript切换按钮图标

Toggle icon on button via JavaScript

本文关键字：按钮 图标 JavaScript 通过      更新时间：2023-09-26

我有一个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

这行得通:

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

主要问题是你正在传递this，这不是一个jQuery对象，所以你需要在jQuery函数$(button)中包装button

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

您的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');
});

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

你正在传递dom节点作为一个参数，并试图在它上使用jquery函数，你需要在onclick($(this)而不是this)中传递一个jquery元素

试试这个:

$('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/

相关文章：