1

在回答这个问题时，我创建了这个 jsfiddle。由于某种原因它不起作用，当我使用萤火虫的错误控制台时，它返回“.show”不是一个函数。这让我相信 jsfiddle 错误地加载了 jQuery。JSFiddle 和 jQuery 之间是否存在任何已知问题？我的代码是否完全不正确（顺便说一句，当我更改.show("slow")它.style.display = "inherit"时工作正常，这就是为什么我认为它必须是 jQuery 的问题......）

一个工作的 JSFiddle 将不胜感激。

4

3 回答 3

6

几个问题：

  1. 你忘了一个}.
  2. 您正在对未包装在 jQuery 对象中的元素调用 jQuery 方法。你需要做：

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

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

现在请注意，此版本有效。

编辑：

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

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

编辑v2

Juan 提出了一个很好的观点，您还应该将 javascript 与标记分开。我的意思是避免使用元素的 on* 属性，并将绑定保留在外部 .js 文件或<script>标签中。例如

<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&nbsp;</span>
    on hover
  </a>
  ...
</body>
于 2011-06-16T22:13:14.513 回答
2

我将其修改为：

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

见：http: //jsfiddle.net/ttweX/

于 2011-06-16T22:13:56.153 回答
1

我真的不喜欢突兀的 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');
       }
    )
});
于 2011-06-16T22:28:13.733 回答