jQuery 根据元素可见性切换文本的行为不符合预期

Question

示例小提琴 - http://jsfiddle.net/S6CwT/

.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但在后续单击时，当div隐藏时，文本不会更改为Show Service Record，当容器再次可见时，文本不会变为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
    });
});

工作演示

Answer 2

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

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

我比较#view_service的html

Answer 3

尝试使用"on"事件对任何事件进行将来的更改，如下所示

 jQuery('#view_service').on("click",function() {
             // your code..
}

Answer 4

试试这个，在 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');
   }

演示

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块中测试可见性。