javascript - 按钮文本切换不起作用

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>