如何根据按钮值停止切换按钮循环？

Question

我有一个带有改变值的按钮的切换菜单。我正在尝试停止切换循环，以便当 value = "thank you" 并且您单击按钮时它不会切换。

1. 按钮 #1 值 = 联系人
2. 单击“联系”后，按钮值更改为“发送消息”，并且在切换下拉菜单中出现第二个按钮（按钮 #2）（“提交”）
3. 单击（“提交”）按钮 #2 后，按钮 #1 的值更改为“谢谢”

https://jsfiddle.net/9882acxn/

CSS：

#container {height: 200px; width: 200px; position: relative; background: red;}

jQuery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>

jQuery(document).ready(function () {  
$("#container").hide();

$("#button").on('click', function() {
if($("#container").is(":visible"))
return false;

$("#container").toggle();
this.value = this.value == 'send message' ? 'contact' : 'send message';
});

 $("#button2").on('click', function() {
    $("#container").toggle();
    $("#button").val('thank you');


if($("#button").val('thank you'))
return false;
 });


}); 
</script>

HTML：

<input type="button" id="button" value="contact" />
<br />
<div id="container">
<input type="button" id="button2" value="send" /></div>

Answer 1

方法 1

如果你在发送消息后完成，只需取消绑定点击事件。

$("#button").unbind('click');

工作示例：https://jsfiddle.net/9882acxn/1/

方法 2

您可以在$("#button").click中添加以下条件

if($("#button").val() == 'thank you')
            return false;

工作示例：https://jsfiddle.net/9882acxn/3/

Answer 2

你可以使用这样的东西

$("#button").replaceWith('<span>Thank You</span>');

Working Demo

Answer 3

将if($("#button").val('thank you'))（将值设置为“谢谢”）更改为if($("#button").val().equals('thank you'))

.equals() 因为字符串在大多数语言中是不可变的（我忘记了 == 是否适用于 js）。

同时重新排序语句：

$("#button2").on('click', function() {
    if($("#button").val('thank you'))
        return false;
    $("#container").toggle();
    $("#button").val('thank you');
});