Question

我有一个jquery代码但是没有工作，似乎我需要原型代码。

<script type="text/javascript">
(function() {
$('form > input').keyup(function() {

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

    if (empty) {
        $('#search').attr('disabled', 'disabled');
    } else {
        $('#search').removeAttr('disabled');
    }
});
})()
</script>
<form>
FROM<br />
<input type="text"/><br />
TO<br />
<input type="text"/><br />     
<input type="submit" id="search" value="GO" disabled="disabled" />
</form>

请有人帮我将这个jquery转换为原型代码吗？

将接受所有类型的帮助。

Answer 1

为了完整起见，我继续将您的代码转换为PrototypeJS。当找到第一个空字段时，我对代码进行了优化（抱歉无法帮助它）退出。

<script type="text/javascript">
document.observe('dom:loaded',function(){
    $$('form > input').invoke('observe','keyup',function() {
        var empty = false;
        $$('form > input').each(function() {
            if (this.value == '') {
                empty = true;
                throw $break;
            }
        });
        $('search').writeAttribute('disabled',empty);
    });
});
</script>
<form>
FROM<br />
<input type="text"/><br />
TO<br />
<input type="text"/><br />     
<input type="submit" id="search" value="GO" disabled="disabled" />
</form>

Answer 2

问题是你的JavaScript在DOM元素加载之前正在执行。

一个非常简单的修复方法是将函数调用包装在默认的jQuery函数中。

<script type="text/javascript">
$(function() {
  $('form > input').keyup(function() {

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

      if (empty) {
          $('#search').attr('disabled', 'disabled');
      } else {
          $('#search').removeAttr('disabled');
      }
  });
});
</script>
<form>
FROM<br />
<input type="text"/><br />
TO<br />
<input type="text"/><br />     
<input type="submit" id="search" value="GO" disabled="disabled" />
</form>

将函数传递给jQuery相当于调用$(document).ready(someFunctionHere)。这样做是推迟函数的执行，直到DOM完成加载。

或者，将脚本标记放在HTML的底部也可以达到预期的效果。

如何将jquery代码转换为原型代码？

2 个答案: