Question

CSS

#service_container {
    display: none;
}

HTML

<a href="/services/update/8" id="view_service">View Service Record</a>

<div id="service_container">
    Test
</div>

的jQuery

jQuery.noConflict();

jQuery(function() {

    // toggle visibility of service section
    jQuery('#view_service').click(function() {
        jQuery('#service_container').slideToggle('slow');
        // toggle text
        if (jQuery('#service_container').is(':visible')) {
            jQuery('#view_service').text('Hide Service Record');
        } else {
            jQuery('#view_service').text('View Service Record');
        }
        return false
    });

});

错误是首次点击该链接时，链接文字会正确更改为Hide Service Record，但在后续点击时，Show Service Record时文字不会更改为div隐藏，并在容器再次可见时返回Hide Service Record。

一定是傻乎乎的我没有发现但却看不出我做错了什么。

我使用is(:hidden)以相反的方式尝试了它，但行为方式相同。

Answer 1

试试这个

jQuery(function() {

     jQuery("#service_container").hide();
     // toggle visibility of service section
     jQuery('#view_service').click(function()
     {
         // toggle text
         if (jQuery('#service_container').is(':visible'))
         {
             jQuery('#view_service').text('View Service Record');
         } 
         else 
         {
             jQuery('#view_service').text('Hide Service Record');
         }
         jQuery('#service_container').slideToggle('slow');

         return false
    });

});

Working Demo

Answer 2

尝试使用“on”事件以便将来对任何事件进行更改

 jQuery('#view_service').on("click",function() {

             // your code..
}

Answer 3

试试这个，在if语句中显示/隐藏

   if (jQuery('#service_container').is(':visible')) {
       jQuery(this).text('View Service Record');
       jQuery('#service_container').hide('slow');
   } else {
       jQuery(this).text('Hide Service Record');
       jQuery('#service_container').show('slow');
   }

DEMO

Answer 4

if (jQuery('#view_service').html()=="View Service Record") {

小提琴：http://jsfiddle.net/S6CwT/2/

我比较#view_service

的html

Answer 5

问题在于，当询问问题时'#service_container'是可见的，因为它在slideToggle()完成之前不可见。一种解决方案是传递逻辑以将名称更改为在slideToggle()完成后运行的函数。

...
var changeText = function() { <visibility text change logic> };
jQuery('#service_container').slideToggle('slow', changeText);
...

编辑：参考保存的小提琴。

完整代码：http://jsfiddle.net/rqGBb/1/

如果您希望在点击时立即更改文字，则必须自己在变量中跟踪“显示/隐藏”状态，挂起元素或测试外部if块中的可见性。

基于元素可见性的jQuery切换文本不符合预期

5 个答案: