按钮文本切换不工作

当点击查看详情=>显示数据。
当数据显示，然后显示隐藏详细信息。

HTML代码

<a href="javascript:void(0);" id="viewdetail" class="btn-primary" style="position:relative;left:20px;" 
       onclick=" 
       $(this).find('.speakers').toggle(function() { 
        $(this).text('Hide Details'); 
         }, function() { 
        $(this).text('view details'); 
         });">view details 


       <div class="speakers dis-non"> 

       </div> 
       </a>

错误

 JQMIGRATE: jQuery.fn.toggle(handler, handler...) is deprecated

来源

2014-12-03 user2818060

参考的jQuery的有两个处理程序回调'toggle'方法已在1.8和1.9中删除的文件！ http://api.jquery.com/toggle-event/ – 2014-12-03 13:41:19

这不是一个有效的HTML嵌套一个“一”元素内部有一个“格”元素。结帐我的答案是一个有效的例子（包括小提琴）。 – 2014-12-03 13:54:47

-1

然后，你可以通过使用jQuery.text的function超载和三元运营商做一个正常的方式。

$('#viewdetail').click(function() { 
    $(this).find('.speakers').text(function(_, txt) { 
     return !txt.indexOf("Hide") ? 'Show Details' : 'Hide Details'; 
    }); 
});

来源

2014-12-03 13:40:19

！txt.indexOf（“隐藏”）将永远是真实的，因为的indexOf返回-1，如果“隐藏”是不存在的......不假。 – 2014-12-03 13:56:43

@Renen检查你的事实。！是不是操作员，它完美的作品 – 2014-12-03 14:00:55

您必须删除.toggle()和使用.text()。

$('#viewdetail').click(function() { 
 
    var div_text = $(this).find('.speakers').text(); 
 
    if (div_text == 'Hide Details') { 
 
    $(this).find('.speakers').text('view details'); 
 
    } else { 
 
    $(this).find('.speakers').text('Hide Details'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<a href="javascript:void(0);" id="viewdetail" class="btn-primary" style="position:relative;left:20px;"> 
 
    <div class="speakers dis-non">view details</div> 
 
</a>

来源

2014-12-03 13:51:03 emmanuel

检查FIDDLE

HTML

<a href="javascript:void(0);" id="viewdetail" class="btn-primary">view details</a> 
<div class="speakers"></div>

var button = $('#viewdetail'); 
var content = $('.speakers'); 
button.click(function(){ 
    var isOpen = content.hasClass('on'); 
    if(isOpen){ 
     button.html('Show Details'); 
     content.removeClass('on'); 
    }else { 
     button.html('Hide Details'); 
     content.addClass('on'); 
    } 
});

CSS

#viewdetail {} 
.speakers {height:20px;background-color:red;transitions:all 500ms;} 
.speakers.on {height:100px;}

来源

2014-12-03 13:53:03

按钮文本切换不工作

回答

相关问题