jQuery 在 JSFiddle 中有效，但在本地 RoR 环境中无效？答案

【问题标题】：jQuery works in JSFiddle but not local RoR environment?jQuery 在 JSFiddle 中有效，但在本地 RoR 环境中无效？
【发布时间】：2013-12-20 02:56:23
【问题描述】：

目前我有两个 JavaScript 函数。 “Check All”功能在 JSFiddle 和本地环境 (http://0.0.0.0:3000) 中都能完美运行。但是，“选择动物”或仅在表单中选择特定选项的功能仅适用于 JSFiddle，但不适用于本地环境。我想知道是什么导致了这个问题。

这是我的“_form.html.erb”中的代码：

    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    </head>

    <script language='JavaScript'>
          checked = false;
          function checkedAll () {
            if (checked == false){checked = true}else{checked = false}
            for (var i = 0; i < document.getElementById('myform').elements.length; i++) {
          document.getElementById('myform').elements[i].checked = checked;
        }
          }
    </script>

    <body>
        <form id="myform">
        Foo1<input type="checkbox" name="foo1"/>
        Bar2<input type="checkbox" name="bar2"/>
        Rah3<input type="checkbox" name="rah3"/>
        Check all: <input type='checkbox' name='checkall' onclick='checkedAll()'>
        </form>
    </body>

    <script language='JavaScript'>
        function checkAnimal () {
            var values = ['1', '2', '4', '5'];
            $("#list").find('[value=' + values.join('], [value=') + ']').prop("checked", $("#checkAnimalCheckbox").prop("checked"));
                     }   
    </script>

    <body>
        <form id='list'><br>
        1<input type='checkbox' value='1' />
        2<input type='checkbox' value='2' />
        3<input type='checkbox' value='3' />
        4<input type='checkbox' value='4' />
        5<input type='checkbox' value='5' />
        CheckAnimal<input type='checkbox' ID="checkAnimalCheckbox" name='checkthese' onclick='checkAnimal()'><br>
        </form>
   </body>

编辑：

我已将代码更改为以下内容：

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>


<script language='JavaScript'>
  checked = false;
  function checkedAll () {
    if (checked == false){checked = true}else{checked = false}
    for (var i = 0; i < document.getElementById('myform').elements.length; i++) {
  document.getElementById('myform').elements[i].checked = checked;
}
  }
</script>

<script language='JavaScript'>
    function checkAnimal () {
        var values = ['1', '2', '4', '5'];
        $("#list").find('[value=' + values.join('], [value=') + ']').prop("checked", $("#checkAnimalCheckbox").prop("checked"));

             }   
</script>

<body>

<form id="myform">
Foo1<input type="checkbox" name="foo1"/>
Bar2<input type="checkbox" name="bar2"/>
Rah3<input type="checkbox" name="rah3"/>
Check all: <input type='checkbox' name='checkall' onclick='checkedAll()'>
</form>

<form id='list'><br>
1<input type='checkbox' value='1' />
2<input type='checkbox' value='2' />
3<input type='checkbox' value='3' />
4<input type='checkbox' value='4' />
5<input type='checkbox' value='5' />
CheckAnimal<input type='checkbox' ID="checkAnimalCheckbox" name='checkanimal' onclick='checkAnimal()'><br>
</form>

</body>

而且“Check All”功能很好用，“Check Animal”还是不行：/

第二次编辑：

我还尝试删除 jquery.min.js 周围的头部标记和表单周围的 body 标记，它给出了相同的结果。 Check All 有效，而 Check Animal 无效。

第三次编辑：

在阅读了你们的建议后修改了代码。不幸的是，它仍然不起作用..非常有趣！

    <head>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script language='JavaScript'>
      checked = false;
      function checkedAll () {
        if (checked == false){checked = true}else{checked = false}
        for (var i = 0; i < document.getElementById('myform').elements.length; i++) {
      document.getElementById('myform').elements[i].checked = checked;
      }
      }
    </script>

    <script language='JavaScript'>
        $(function() {
        function checkAnimal () {
        var values = ['1', '2', '4', '5'];
        $("#list").find('[value=' + values.join('], [value=') + ']').prop("checked", $("#checkAnimalCheckbox").prop("checked"));
        }
        }); 
    </script>

    </head>

    <body>

    <form id="myform">
    Foo1<input type="checkbox" name="foo1"/>
    Bar2<input type="checkbox" name="bar2"/>
    Rah3<input type="checkbox" name="rah3"/>
    Check all: <input type='checkbox' name='checkall' onclick='checkedAll()'>
    </form>

    <form id='list'><br>
    1<input type='checkbox' value='1' />
    2<input type='checkbox' value='2' />
    3<input type='checkbox' value='3' />
    4<input type='checkbox' value='4' />
    5<input type='checkbox' value='5' />
    CheckAnimal<input type='checkbox' ID="checkAnimalCheckbox" name='checkanimal' onclick='checkAnimal()'><br>
    </form>

   </body>

编辑 4：

在 Firebug 显示“检查动物”未定义后，我已删除围绕“检查动物”功能的 $(function() {。现在新的错误是：

TypeError: $(...).find is not a function

...lue=' + values.join('], [value=') + ']').prop("checked", $("#checkAnimalCheckbox...

新的“检查动物”代码只是简单地反转回原来的代码：

<script language='JavaScript'>
function checkAnimal() {
var values = ['1', '2', '4', '5'];
$("#list").find('[value=' + values.join('], [value=') + ']').prop("checked", true);

}
</script>

【问题讨论】：

为什么你的脚本标签在头部和身体部分之间？以及您的 html 中的多个 head 和 body 部分？
我在您的代码中的任何地方都没有看到 Select Animal。
您的解决方案中有两个 body 标签，两个 form。这不是一个好主意！
@Barmar：对不起，我的意思是“checkAnimal()”。它是代码中的第二个 JavaScript。
我怀疑它在 jsfiddle 中工作，因为它删除了您的 <body> 和 <head> 标签并将代码插入到它自己的头部和身体部分。

标签： javascript jquery html css ruby-on-rails

【解决方案1】：

试试这个：

$(function() {
  function checkAnimal () {
    var values = ['1', '2', '4', '5'];
    $("#list").find('[value=' + values.join('], [value=') + ']').prop("checked", $("#checkAnimalCheckbox").prop("checked"));
  }
});

【讨论】：

你好，我用的是你的代码，但是本地环境很顽固！请检查我上面修改过的代码:)

【解决方案2】：

我找到了解决办法！

非常感谢您的所有帮助。没有你，我不会想到这一点。

解决方法是将代码中的“$”改为“jQuery”，用于函数“checkAnimal”，如下所示：

<script language='JavaScript'>
                function checkAnimal () {
                var values = ['1', '2', '4', '5'];
                jQuery("#list").find('[value=' + values.join('], [value=') + ']').prop("checked", jQuery("#checkAnimalCheckbox").prop("checked"));

                 } 
</script>

祝大家节日快乐！

【讨论】：