jQuery工作在JSFiddle但不是本地RoR环境？ [英] jQuery works in JSFiddle but not local RoR environment?
问题描述
目前我有两个JavaScript函数。 检查所有功能在JSFiddle和本地环境（http://0.0.0.0:3000）中完美工作。但是，选择动物或只选择表单中的特定选项的函数仅在JSFiddle中有效，但在本地环境中不起作用。
Currently I have two JavaScript functions. The "Check All" function works perfectly in both JSFiddle and local environment (http://0.0.0.0:3000). However, "Select Animal" or a function that only selects specific options in a form only works in JSFiddle but not in local envirobment. I wonder what is causing this issue.
这里是我的_form.html.erb中的代码：
Here are the codes inside my "_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>
并且检查所有功能工作得很好，检查动物 /
And "Check All" function works very well, and "Check Animal" still doesn't work :/
第二个编辑：
我也尝试去掉jquery.min.js和body标签围绕形式，它给出相同的结果。
I also tried removing head tads around jquery.min.js and the body tags around the forms, and it gives the same result. Check All works and Check Animal doesn't.
第三次编辑：
建议。不幸的是，它仍然不工作..非常有趣！
Revised codes after reading you guys' suggestions. Unfortunately, it still doesn't work.. Very interesting!
<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（）{周围的检查动物功能，现在新的错误是：
I've removed $(function() { around "Check Animal" function after Firebug shows "Check Animal" is not defined. And now the new error is:
TypeError: $(...).find is not a function
...lue=' + values.join('], [value=') + ']').prop("checked", $("#checkAnimalCheckbox...
$ b b
新的检查动物代码只是简单地反转回原始代码：
The new "Check Animal" code is simply reversed back to the original code:
<script language='JavaScript'>
function checkAnimal() {
var values = ['1', '2', '4', '5'];
$("#list").find('[value=' + values.join('], [value=') + ']').prop("checked", true);
}
</script>
推荐答案
！
非常感谢你的帮助，没有你，我就不会想出来。
Thank you so much for all of your help. Without you, I wouldn't have figured this out.
解决方案是将代码中的$更改为checkAnimal函数的jQuery，如下所示：
The solution is changing "$" in the code to "jQuery" for function "checkAnimal" as shown below:
<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>
节日快乐，大家！
这篇关于jQuery工作在JSFiddle但不是本地RoR环境？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
