Question

我有一个工作脚本切换我的div，它工作得很好，但我无法弄清楚如何在点击时更改按钮文本。我需要按钮文本为＆＃34; Hide Spreads＆＃34;当展示展开div时，＆＃34; Show Spreads＆＃34;当扩展div没有显示时。

脚本：

$(document).ready(function(){
  $(".spread").show();
  $(".show_hide").show();
  $('.show_hide').click(function(){
    $(".spread").toggle();
  });
});

按钮：

<input type="button" class="show_hide" value="Hide Spreads" />

Answer 1

您可以使用$(this).val()获取按钮的值，并将其与其他可能的值进行核对。

$('.show_hide').click(function(){
    $(".spread").toggle();
    $(this).val( $(this).val() == 'Hide Spreads' ? 'Show Spreads' : 'Hide Spreads' );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="button" class="show_hide" value="Hide Spreads">
<div class="spread">Test</div>

Answer 2

您可以使用$（this）.text（）来获取按钮文本，并通过其他方式对其进行更改。

<button id="show_hide">Show</button>
<div id="display"></div>
<script>
$("#show_hide").click(function(){
    $("#display").toggle();
    if($(this).text() == "Show"){
       $(this).text("Hide");
    }else{
       $(this).text("Show");
    }
});
</script>

JQuery切换div和更改按钮文本

2 个答案: