JSFIddle不使用Jquery [英] JSFIddle not working with Jquery
问题描述
在处理这个问题我创建了这个jsfiddle 。由于某种原因，它不起作用，当我使用firebug的错误consol时它返回.show不是一个函数。这让我相信jsfiddle错误地加载jQuery。 JSFiddle和jQuery之间是否存在任何已知问题？我的代码是不正确的（BTW当我将 .show（慢）更改为 .style.display =inherit它运行正常，这就是为什么我认为它必须是jQuery的一个问题......）
While working on an answer to this question I created this jsfiddle. For some reason it isn't working, and when I used firebug's error consol it was returning that ".show" is not a function. This leads me to believe that jsfiddle is incorrectly loading jQuery. Are there any known issues between JSFiddle and jQuery? Is my code simply incorrect (BTW when I change .show("slow") to .style.display = "inherit" it works fine which is why I think it has to be a problem with jQuery...)
一个工作的JSFiddle将不胜感激。
A working JSFiddle would be greatly appreciated.
推荐答案
一些问题：
- 你忘记了
}。 - 您正在对未包装在jQuery对象中的元素调用jQuery方法。您需要这样做：
$(itemName.getElementsByTagName("span")[0]).show("slow");
（注意包装）。 jQuery方法不会神奇地扩展默认元素，必须首先包装对象。
(Note the wrapping). jQuery methods don't magically extend default elements, the object must be wrapped first.
现在注意此版本有效。
编辑：
或者，您可以使用jQuery构造（范围）的第二个参数并缩短此代码：
Alternatively, you could use the second parameter of jQuery's construct (scope) and shorten this code:
function showy(itemName) {
$('span:first',itemName).show("slow");
}
function closy(itemName) {
$('span:first',itemName).hide("slow");
}
EDITv2
Juan提出了一个很好的观点，你还应该将javascript与标记分开。我的意思是避免使用元素的on *属性，并将绑定保留在外部.js文件或< script> 标记内。例如。
Juan brought up a good point, you should also separate javascript with markup. By this I mean avoid using the on* attributes of the elements, and keep the bindings within the external .js file or <script> tags. e.g.
<head>
...
<script src="http://path.to/jquery.js">
<script>
$(function(){ // execute once the document is ready (onload="below_code()")
// bind to the buttons' hover events
// find them by the "button" and "white" class names
$('.button.white').hover(function(){ // hover event (onmouseover="below_code()")
// find the first span within the link that triggered the event
$('span:first',this).show('slow');
},function(){ // mouse out event (onmouseout="below_code()")
// likewise, find first span
$('span:first',this).hide('slow');
});
});
</script>
...
</head>
<body>
...
<a href="#" class="button white" id="button1">
<span id="spanToShow">SHOW: this text </span>
on hover
</a>
...
</body>
这篇关于JSFIddle不使用Jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
