如何在javascript中交换图像

Question

我试图做一个显示/隐藏功能，但我有一个问题，在交换图像(bootstrap类)。显示隐藏功能是工作的，问题是我不知道如何检测哪一个类是在加号的代码，我能够改变类从最小到plus....then用户再次点击按钮，它显示的内容，但它仍然是加号类。

HTMl。

<span class="glyphicon show-hide glyphicon-minus"></span>

JS。

$('.glyphicon-minus').click(function()
{
    $('.show-hide').removeClass('glyphicon-minus').addClass('glyphicon-plus');
    $(this).closest('div').next('.widget-content').slideToggle();

    var $classto = $('.glyphicon-plus');
    $classto.is(':visible')
    {
        $('.show-hide').removeClass('glyphicon-plus').addClass('glyphicon-minus');
    } 
})

Answer 1

glyphicon-plus类之所以保留下来，主要是因为您在事件侦听器中以“.lyphicon-minus”类为目标。但是当你改变你的类时，字形减号就不存在了。将您切换到保留在元素上的类应该能起到作用。

我还对您的代码进行了一些重构。

$('.show-hide').on("click",function()
{       
    if ($(this).hasClass("glyphicon-minus")){
        $(this).removeClass('glyphicon-minus').addClass('glyphicon-plus');
    }else{
      $(this).removeClass('glyphicon-plus').addClass('glyphicon-minus');
    }
    $(this).closest('div').next('.widget-content').slideToggle();

});

Answer 2

$('.show-hide').on('click', function(){
  var $this = $(this);
  if($this.hasClass('glyphicon-minus')) {
    $this
      .removeClass('glyphicon-minus')
      .addClass('glyphicon-plus')
      .closest('div')
      .next('.widget-content')
      .slideUp();
  }
  else {
    $this
      .removeClass('glyphicon-plus')
      .addClass('glyphicon-minus')
      .closest('div')
      .next('.widget-content')
      .slideDown();
  }
});

或者，假设您的html已正确初始化：

$('.show-hide').on('click', function(){
    $(this)
      .toggleClass('glyphicon-plus glyphicon-minus')
      .closest('div')
      .next('.widget-content')
      .slideToggle();
});

(通常，您不希望将切换函数与非切换函数混合使用。)