Question

我需要什么

点击查看详细信息=＆gt;显示数据。
显示数据时显示隐藏详细信息。

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＆＃39; function重载和三元运算符以正常方式执行此操作。

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

按钮文本切换不起作用

3 个答案: