涉及事件和 if/else 语句和表单的 jQuery 逻辑答案

【问题标题】：jQuery logic involving an event and if/else statement and a form涉及事件和 if/else 语句和表单的 jQuery 逻辑
【发布时间】：2012-04-27 04:16:13
【问题描述】：

这对于经验丰富的开发人员来说可能是显而易见的，但我正在尝试自学 jQuery，但我遇到了这个问题。假设我有一个 id 为“btn”的按钮，而 Html 为“Msg 1” 单击按钮时，我想将 Html 更改为“Msg 2”。这是我尝试这样做的方式，并且有效。但是如果按钮是表单的一部分，这种方式将不起作用。当按钮是表单的一部分时，有没有办法做到这一点？

(function($) {
   var test = true;
   $('#btn').on('click',function() {
        if(test == true) {
            test = false;
            $(this).html('Msg 2');
        } else {
            test = true;
            $(this).html('Msg 1');
        }
   }
})(jQuery);

【问题讨论】：

如果它是表单的一部分则无关紧要
“表单的一部分”是指还是？

标签： jquery html logic

【解决方案1】：

这是一些 JSFiddle 代码，可以满足您的要求：

http://jsfiddle.net/RSVdw/1/

将 .html() 更改为 .val() 并添加了 e.preventDefault() 以便表单在按下时不会刷新整个页面。

HTML 代码：

<html>
<head></head>
<body>
    <form>
        Press me &gt;&gt; <input type="submit" id="btn" value="Msg 1"/>
    </form>
</body>
</html>

JS代码：

(function($) {
   var test = true;
   $('#btn').on('click',function(e) {
       e.preventDefault();
        if(test == true) {
            test = false;
            $(this).val('Msg 2');
        } else {
            test = true;
            $(this).val('Msg 1');
        }
   });
})(jQuery);

【讨论】：

【解决方案2】：

我没有正确理解你的问题，但你可以试试这个。

$('#btn').live('click', function(event) 
    {

         $(this).val('Msg 2');
    });

【讨论】：

【解决方案3】：

上面的解决方案都是正确的，但是除非按钮是动态创建的，否则不需要使用'on'或已弃用的'live'。

$('#btn').click(function(e) {
    e.preventDefault(); //.. prevent the button from submitting the form
    test = !test;
    $(this).text(test ? 'msg 1' : 'msg 2'); //.. no need to use .html if you're just switching text
});

注意：此解决方案假设您使用的是<button>，如果您使用的是<input type='submit|button'>，则需要使用$(this).val() 而不是$(this).text()

【讨论】：