Question

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

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

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

});

如何在javascript中交换图像

2 个答案: