如何停止基于按钮值的切换按钮循环？

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

如果您在发送消息后完成操作，只需取消绑定click事件。

$("#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>');

工作演示

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');
});