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

这对于有经验的开发人员来说可能是显而易见的，但我试图自学jQuery，并且遇到了这个问题。假设我有一个ID为'btn'的按钮，Html是'Msg 1' 我想在点击按钮时将Html改为'Msg 2'。这是我试图做到这一点的方式，它的工作原理。但是如果按钮是表单的一部分，这种方式将不起作用。当按钮是表单的一部分时，有没有办法做到这一点？涉及事件和if/else语句和表单的jQuery逻辑

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

来源

2012-04-27 Benjamin Thvedt

邮政形式的HTML。 – Blender 2012-04-27 04:20:08

如果它是一个表格的一部分应该不重要 – superhero 2012-04-27 04:20:16

通过“表单的一部分”，你的意思是还是？ – MALfunction84 2012-04-27 04:20:46

下面是一些代码的jsfiddle，它不问你什么：

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

改变了。html的（）'s到.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);

来源

2012-04-27 04:22:52

不错。感谢你的回答！ – 2012-04-27 05:09:47

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

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

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

来源

2012-04-27 04:24:09

上述解决方案是正确的，但不需要使用'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()

来源

2012-04-27 04:48:06 rkw

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

回答

相关问题