按钮文字切换不起作用

Question

我需要的

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

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

Answer 1

您必须删除.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> 

Answer 2

检查FIDDLE

HTML

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

JS

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;}

Answer 3

然后，您可以使用jQuery.text的function重载和三元运算符以正常方式进行操作。

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