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 指的是什么？And- id: '123' stock: '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 指的是什么

一个<form>带有 jQ​​uery 选择器的元素class=stock。如果你有：

<form class="stock">

在您的 HTML 中，然后$("form.stock")选择它。 .submit将函数绑定到它的“提交”事件。

和- 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 回答