如何在javascript中交換圖像

Question

我試圖做一個顯示/隱藏功能，但我在交換圖像（引導類）時遇到問題。 顯示隱藏功能正在工作，問題是我不知道如何檢測顯示哪個類....用我有的代碼，我可以將類從分鐘更改爲加...然後用戶再次點擊該按鈕，它顯示內容，但它仍然是加班。

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

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(); 

}); 

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

（一般情況下，你不想與非切換功能混合切換功能）