1

我正在努力实现以下目标，但我的代码存在问题以使其正常工作。任何帮助将不胜感激。

目标：添加 javascript/jQuery 代码以要求登录。有 2 个字段，名字和姓氏。验证输入。必须分别是“Rick”和“James”。验证字段后，页面上会显示图片。单击图片时，显示页面内容。至少有 2 个带有翻转状态的链接按钮来更改按钮颜色和/或文本大小。

这是我的脚本：

$(document).ready(function() {

   $("#signup").validate({
      rules: {
        firstName: { required: true  },
        lastName:  { required: true  }
      }, //end rules
      messages:  {
         firstName: {required: "You must enter a value in this field."  },
         lastName: {required: "You must enter a value in this field."  }
      }, // end messages
          errorPlacement: function(error, element) { 
          error.insertAfter(element);
          } 
     }); // end validate
     $('#signup').submit(function() {
         if (($('#firstname').val() == 'John')  && ($('#lastname').val() == 'Taylor'))
            {alert('This works!');
            $('#pic').show();
            $('#main').css("backgorund-image", "url(starwars.jpg)");
          }
         else { alert('Invalid Name'); }
      });  //end submit
    $('#pic').click(function() {
        $('#button1').show();
        $('#button2').show();
    }); // end click
}); // end ready

HTML：

<form id="signup">
        <div>
            <label for="firstName" class="label">First Name</label>
            <input name="firstName" type="text" id="firstname"  class="required" title="Please type your first name.">
        </div>          
        <div>
            <label for="lastName" class="label">Last Name</label>
            <input name="lastName" type="test" class="required" id="lastname">
        </div>          
        <div>
            <input type="submit" name="submit" id="submit" value="Submit">
        </div>
        <div>
        <img src="sith_ewok.png" id="pic">
        <button id="button1">Jedi</button>
        <button id="button2">Sith</button>
        </div>
    </form>
4

2 回答 2

0

到目前为止，您的代码中唯一突出的background-image错误是提交函数中的拼写错误。

可能的一件事是，由于表单会自动发布，因此单击提交按钮的影响很小。这可能意味着您永远看不到脚本执行的效果。要解决此问题，请添加return false;到提交处理：

   $('#signup').submit(function() {
     if (($('#firstname').val() == 'John')  && ($('#lastname').val() == 'Taylor'))
     {alert('This works!');
        $('#pic').show();
        $('#main').css("backgorund-image", "url(starwars.jpg)");
      }
     else { alert('Invalid Name'); }
     return false;
  });  //end submit

请注意，如果您实际上要使用此表单在另一个页面上进行进一步处理，您稍后可能希望提交功能允许页面在字段签出的情况下发布。为此，将return false;代码行移动到else和/或添加 areturn true;作为主if块中的最后一行。

于 2013-04-22T17:45:09.403 回答
0

下定决心！是“Rick James”还是“John Taylor”？！

无论如何，代码看起来不错，除了

  1. 您应该放入return false;以$.submit()防止页面刷新

  2. 拼写错误background-color

  3. 图像和两个按钮应display:none在开始时设置为，因此该show()功能将实际起作用

此外，我没有看到您在任何地方更改按钮颜色/状态的代码。所以我只是在按钮上添加了一些.mouseover和.mouseout事件。这通常可以用 css 来完成，例如button:hover {color:red}.

这是一个工作演示：http: //jsfiddle.net/dUG8Y/

希望对您有所帮助，愿原力与您同在。

于 2013-04-22T17:55:37.060 回答