jquery - 为什么我的 jquery 不能以重力形式工作？

Question

我使用 Wordpress 插件 Gravity 表单。

现在我想添加一些“实时验证”。（当字段中有值时，提交按钮会改变颜色。）

我使用这个脚本，当我创建一个基本表单时它工作得很好。

<script type="text/javascript">
$(window).load(function(){
(function() {
    $('.gform_fields  > .medium').keyup(function() {

        var empty = false;
        $('.gform_fields > .medium').each(function() {
            if ($(this).val() == '') {
                empty = true;
            }
        });

        if (empty) {
            $('.gform_button').css("","");
        } else {
            $('.gform_button').css("background-color","green");
        }
    });
})()
});  

</script>

但是当我尝试在我的 Gravity 表单上使用脚本时，它什么也没做？

所以这是我的例子：http: //goo.gl/a4m0Kv

如您所见，底部有一个小表单，带有一个提交按钮。填写完输入后，提交按钮变为绿色。

重力形式也应该发生同样的情况，但由于某种原因它不起作用？

希望有人可以提供帮助:)

Answer 1

您的选择器不会返回您正在谈论的输入。

'.gform_fields > .medium'

返回

<input type=​"text" id=​"email" class=​"medium" name=​"email">​
<input type=​"text" id=​"email" class=​"medium" name=​"email">​
<input type=​"text" id=​"email" class=​"medium" name=​"email">​
<input type=​"text" id=​"email" class=​"medium" name=​"email">​

在您的选择器中删除>，使其看起来像'.gform_fields .medium'然后它返回 5 个字段。

<input name=​"input_1" id=​"input_2_1" type=​"text" value class=​"medium" tabindex=​"1">​
<input type=​"text" id=​"email" class=​"medium" name=​"email">​
<input type=​"text" id=​"email" class=​"medium" name=​"email">​
<input type=​"text" id=​"email" class=​"medium" name=​"email">​
<input type=​"text" id=​"email" class=​"medium" name=​"email">​

选择器'.gform_button'返回两个按钮，这就是为什么两个按钮都变成绿色的原因。

您应该编辑选择器以使它们返回正确的元素。