JQuery 切换 div 并更改按钮文本

Question

我有一个可以切换 div 的工作脚本，它运行良好，但我不知道如何在单击时更改按钮文本。当显示价差 div 时，我需要按钮文本为“隐藏价差”，当未显示价差 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>