1

私は Gravity Forms を使用しており、onclick の後に送信ボタンのテキストを「処理中...」に変更したいと考えています。Gravity Forms から、heading.php ファイルでカスタム JavaScript を使用してこれを実現するように言われました。次のスクリプトが与えられました (http://stackoverflow.com/questions/1071012/using-jquery-to-change-input-button-text-back-after-a-few-seconds) このリンクは、正しい方向を示しますしかし、私はまだ学んでいるので、助けが必要です! 誰かがこのコードを少し分解してくれませんか?

$("form.stock").submit(function()
{
    var $form = $(this);
    $.post( $form.attr('action'), { id: '123', stock: '1' } );
    var $submit = $form.find(":submit").attr('value','Saved!');
    window.setTimeout(function()
    {
        $submit.attr('value','Update') 
    }, 2000);
    return false;
});

form.stock は何を参照していますか? そして- id:'123' 在庫:'1' 参照?

そして最後に、(これは)何をしますか? -var $form = $(this);

ご親切にありがとうございました。これらは知っておくべき基本的な質問です。

4

2 に答える 2

1 
$("form.stock") // <-- this finds forms with class=stock
    .submit(function() { // <-- binds submit handler to them
    var $form = $(this);  //<-- this caches current form that's triggered event handler
       // ajax post to the current form's action attribute
       $.post($form.attr('action'), {
           id: '123',  // <-- these are the data passed back to your server
           stock: '1'
       });
       //  find's submit button and changes value to 'Saved!'
       var $submit = $form.find(":submit").attr('value', 'Saved!');
       window.setTimeout(function() {
           // after 2000ms update value back to 'Update'
           $submit.attr('value', 'Update')
       }, 2000);          
       return false; // <-- stops any event bubbling and default action of form submit
});​

成功関数内で実際にテキスト変更を行う必要がありますが、そのようにすると、投稿のみが成功しましたが、変更されます。

$("form.stock").submit(function() { 
    var $form = $(this);            
       $.post($form.attr('action'), function(){ 
          // these are now in the success function.. so these will only occur if ajax is successful
          var $submit = $form.find(":submit").attr('value', 'Saved!');
          window.setTimeout(function() {
              // after 2000ms update value back to 'Update'
              $submit.attr('value', 'Update')
          }, 2000);
       });        
    return false; // <-- stops any event bubbling and default action of form submit
});​
于 2012-12-04T22:10:17.120 に答える
1

form.stock とは何を参照しているのか

jQuery セレクターとしての<form>要素。class=stockあなたが持っている場合：

<form class="stock">

HTML で、それ$("form.stock")を選択します。 .submit関数を「送信」イベントにバインドします。

And- id: '123' 在庫: '1'

これは、このデータを使用して HTTP POST リクエストを作成するためのものです。GET 形式では、次のような URL になります。

/action/?id=123&stock=1

この例では、例を説明するために値123を1任意に選択しただけです。おそらく、何らかの方法でフォームからこれらの値を取得する必要があります。

$form = $(this)

これは、メソッド呼び出しの結果を$(this)変数に代入するだけです。

$実際にはjQueryメソッドです。基本的$(this)に、引数で関数を呼び出しますthis。関数の呼び出しは比較的コストがかかり、リソースを消費します。ただし、変数を使用してもそれほど多くはありません。これを行う方が効率的です。

$form = $(this);
$form.one();
$form.two();
$form.three();

これの代わりに：

$(this).one();
$(this).two();
$(this).three();

前者にはメソッド呼び出しが 4 つしかありませんが、後者には 6 つのメソッド呼び出しがあります。

混乱しないでください:$formは単なる変数名です。aform、form、x、またはその他の有効な名前を付けることができます。

于 2012-12-04T22:12:17.993 に答える