Question

这对于经验丰富的开发人员来说可能是显而易见的，但我正在尝试自学jQuery而且我遇到了这个问题。假设我有一个id为“btn”的按钮，而Html是“消息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);

Answer 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);

Answer 2

我没有正确理解你的问题，但你可以尝试一下。

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

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

Answer 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()代替{{1} }}

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

3 个答案: