页面加载后如何执行if语句？答案

【问题标题】：How to execute if statement after page has been loaded?页面加载后如何执行if语句？
【发布时间】：2015-02-28 08:43:09
【问题描述】：

在此处查看实际操作：http://jsbin.com/relamiqeru/1/

我正在努力做到这一点，如果用户在优惠券代码字段中输入“idh4”，我的“booyah”div 就会被提供的 html 填充。

我觉得的问题是javascript只在页面加载时执行，所以即使在字段中输入了idh4，它也不再检查它了。在这种情况下，可能不适合使用 if 语句？

根据要求，这里是jsbin代码：

  <div id="booyah"></div>
<form action="" method="POST">
        Coupon Code?<input id="couponcode" type="text" name="coupon code" value="idh4"><br>
        <input type="submit">
    </form>

$("#couponcode").change(function(){
if ($("#couponcode").val() === 'idh4') {
      console.log('it got called');
      $( "#booyah" ).html("<p>That code gets you free snappie stickers!</p>");
  }

  });

【问题讨论】：

那是非常少的代码。请在您的问题中发布。很难挖掘那个 jsbin 页面的来源。
另外，您可能希望在服务器端进行此验证。你在这里做的是一个安全隐患。任何人都可以看到您的 JS 代码，并且“idh4”是密码。如有必要，应在服务端使用包含文本的booyah div 生成 HTML。如果您想在提交表单之前验证优惠券代码，则需要在用户按下按钮时进行AJAX调用以验证不会提交表单的优惠券代码。

标签： javascript jquery

【解决方案1】：

我不确定这是你想要的，但你还是可以看看：

$(document).ready(function(){
   $("#booyahInput").on('keyup', function(){
      if ($(this).val() == 'idh4') {
         console.log('it got called');
         $( "#booyah" ).html("<p>That code gets you free snappie stickers!</p>");
      }
    });
});

http://jsfiddle.net/rwxygptf/

【讨论】：

【解决方案2】：

这里的问题是你在文本框上使用了change 事件：

$("#couponcode").change

在文本框上change 因失去焦点而被解雇。所以在输入优惠券后，用户必须离开现场。

请尝试input、keyup、keypress 事件以立即响应。

$("#couponcode").on('input', function(){
    //
});

【讨论】：

看到您的回答后，我意识到 OP 想要在不提交表单的情况下执行此操作。你的答案是正确的，+1。

【解决方案3】：

如果您希望它在提交时触发，则必须添加一个函数以在提交时触发，如果您希望它在字段中的文本更改时触发 - 您需要监听事件。理解事件监听器是理解 javascript 的关键。

这里有 2 个参考：提交：

http://www.javascript-coder.com/html-form/html-form-tutorial-p1.phtml

听众：

jQuery Listen For All Text Input Changes

【讨论】：

【解决方案4】：

您遇到的问题是提交表单时页面正在重新加载。要正确执行此操作，您需要通过 AJAX 提交表单并防止页面刷新。但是根据您提供的代码，不清楚您是否正在这样做。

JSFiddle

$("#myform").on("submit", function(e) {
    e.preventDefault();
    if ($("#couponcode").val() === 'idh4') {
        console.log('it got called');
        $("#booyah").html("<p>That code gets you free snappie stickers!</p>");
    }
});

【讨论】：