Question

在处理this question的答案时，我创建了this jsfiddle。由于某种原因，它不起作用，当我使用firebug的错误consol时它返回“.show”不是一个函数。这让我相信jsfiddle错误地加载jQuery。 JSFiddle和jQuery之间是否存在任何已知问题？我的代码是不正确的（BTW当我将.show("slow")更改为.style.display = "inherit"时，它工作正常，这就是为什么我认为它必须是jQuery的问题...）

非常感谢工作的JSFiddle。

Answer 1

有几个问题：

您忘记了}。
您正在对未包含在jQuery对象中的元素调用jQuery方法。你需要这样做：

$(itemName.getElementsByTagName("span")[0]).show("slow");

（注意包装）。 jQuery方法不会神奇地扩展默认元素，必须首先包装对象。

现在请注意this version works。

修改：

或者，您可以使用jQuery构造（范围）的第二个参数并缩短此代码：

function showy(itemName) { $('span:first',itemName).show("slow"); } function closy(itemName) { $('span:first',itemName).hide("slow"); }

<强> EDITv2
胡安提出了一个很好的观点，你也应该将javascript与标记分开。我的意思是避免使用元素的on *属性，并将绑定保留在外部.js文件或<script>标记内。 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>

Answer 2

我将其修改为：

function showy(itemName) {
    $(itemName).find("span").show("slow");
}
function closy(itemName) {
     $(itemName).find("span").hide("slow");
}

请参阅：http://jsfiddle.net/ttweX/

Answer 3

我真的不是一个突兀的javascript粉丝：p

你应该习惯于从不使用内联事件处理程序，而是使用jQuery的事件绑定。

更好的解决方案：

http://jsfiddle.net/ttweX/2/

Tomh联系的那个人做了一些奇怪的无限眨眼的讨厌。

$(function(){
    $('a.button').hover(
       function(){
         $(this).find('span').show('slow');
       },
       function(){
         $(this).find('span').hide('slow');
       }
    )
});

JSFIddle不使用Jquery

3 个答案: