使用slideToggle（）更改文本不能按預期方式工作

我想要在切換表的可見性時更改元素中的文本。我可以切換它們，但無法更改元素內的文本。使用slideToggle（）更改文本不能按預期方式工作

<table class="table funds-table"> 
<thead class="table-head"> 
<tr> 
    <th id="equity-text">EQUITY</th> 
    <th id="eq-show-less">SHOW LESS</th> 

</tr> 
</thead> 

<tbody id = "equity-body"> 
<tr> 

    <td class = "fund-name"> 

    <div class = "col-xs-1 padding-lr-zero checkbox-div"><input type="checkbox" id = "checkbox1"> 
     <label for="checkbox1"><span class="checkbox"><img src="icons/check_dis.png"></span></label></div> 

    <div class = "col-xs-11 fund-name-div"><span class = "span-fund-name">HDFC DYNAMIC FUND HDFC DYNAMIC FUND HDFC DYNAMIC</span><p class = "currently-inv"> Currently invested <span class = "curr-span-amt">Rs. 50,000</span></p></div> 

    </td> 

    <td class = "fund-amount"><p class = "fund-amount-inner">Rs. 50,00,000</p></td> 
</tr> 

<tr> 

    <td class = "fund-name"> 

    <div class = "col-xs-1 padding-lr-zero checkbox-div"><input type="checkbox" id = "checkbox2"> 
     <label for="checkbox2"><span class="checkbox"><img src="icons/check_dis.png"></span></label></div> 

    <div class = "col-xs-11 fund-name-div"><span class = "span-fund-name">HDFC DYNAMIC FUND HDFC DYNAMIC FUND HDFC DYNAMIC</span></div> 

    </td> 

    <td class = "fund-amount"><p class = "fund-amount-inner">Rs. 50,00,000</p></td> 
</tr>

它告誡當tbody是visible但是當它是hidden不是。

$('#eq-show-less').on('click',function(){ 

    $('#equity-body').slideToggle('slow'); 

    }); 


    $(function(){ 
    if ($('#equity-body').is(':visible')) { 
     $('#eq-show-less').text("SHOW LESS"); 
     alert('visible'); 
    } 

    if($('#equity-body').is(':hidden')){ 
     $('#eq-show-less').text("SHOW MORE"); 
     alert('not visible'); 
    } 
    });

這裏是fiddle

我想文字更改爲顯示較少當tbody是可見的，表現出更多的時tbody隱藏

來源

2017-03-01 Naveen Kumar

大多數jQuery方法有所回調，這是你可以做一些更多的動作發生之後函數執行完畢 – Sojtin

的問題是因爲你只頁面加載時檢查元素的:visible狀態。

要解決此問題，您需要在fadeToggle()動畫完成時檢查它。要做到這一點，你可以使用回調參數，就像這樣：

$('#eq-show-less').on('click', function() { 
    $('#equity-body').slideToggle('slow', function() { 
     $('#eq-show-less').text($(this).is(':visible') ? 'SHOW LESS' : 'SHOW MORE'); 
    }); 
});

Updated fiddle

來源

2017-03-01 09:17:51

使用slideToggle（）更改文本不能按預期方式工作

回答

相關問題