1

次の目標を達成しようとしていますが、コードを機能させるには問題があります。どんな助けでも感謝します。

目的: ログインを要求する JavaScript/jQuery コードを追加します。First Name と Last Name の 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

決心してください！「リック・ジェームス」か「ジョン・テイラー」か!?

とにかく、コードは問題なく見えます

  1. ページの更新を防ぐためreturn false;に入れる必要があります$.submit()

  2. スペルミスbackground-color

  3. 画像と2つのボタンdisplay:noneを最初に設定する必要があるため、show()機能は実際に機能します

また、ボタンの色/状態を変更するためのコードがどこにもありません。そのため、ボタンにいくつか.mouseoverのイベントを追加しました。.mouseoutこれは通常、.css などの css だけで実行できますbutton:hover {color:red}。

これは実際のデモです: http://jsfiddle.net/dUG8Y/

フォースがあなたと共にありますように。

于 2013-04-22T17:55:37.060 に答える
0

これまでのところ、コードで目立つ唯一のエラーはbackground-image、submit 関数のスペルが間違っていることです。

可能性が高いと思われることの 1 つは、フォームが自動的に投稿されるため、送信ボタンをクリックしても最小限の効果しか見られないことです。これは、スクリプトが実行された結果がまったく表示されないことを意味する可能性があります。これを修正する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;これを行うには、コード行をに移動するか、メインブロックの最後の行としてelsea を追加します。return true;if

于 2013-04-22T17:45:09.403 に答える