使用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（）更改文本不能按预期方式工作

回答

相关问题