如何在javascript中交换图片

Question

我正在尝试执行显示/隐藏功能，但是在交换图像（bootstrap类）时遇到问题。 show-hide函数正在运行，问题是我不知道如何检测正在显示的类。用我拥有的代码，我可以将类从min更改为plus。然后用户再次单击该按钮，它将显示内容，但仍为plus类。

HTM1。

<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

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

（通常，您不希望将切换功能与非切换功能混合使用。）

Answer 2

保留glyphicon-plus类的原因主要是因为您在事件侦听器中定位了“ .glyphicon-minus”类。 但是，当您更改类时，glyphicon-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();

});