1

この質問への回答に取り組んでいるときに、この jsfiddleを作成しました。何らかの理由で機能しません。firebug のエラー コンソールを使用すると、「.show」は関数ではないと返されました。これにより、jsfiddle が jQuery を誤ってロードしていると思われます。JSFiddle と jQuery の間に既知の問題はありますか? 私のコードは単に間違っていますか（BTWに変更.show("slow")する.style.display = "inherit"と正常に動作するため、jQueryの問題である必要があると思います...）

動作中の JSFiddle は大歓迎です。

4

3 に答える 3

6

いくつかの問題:

  1. を忘れました}。
  2. jQuery オブジェクトにラップされていない要素で jQuery メソッドを呼び出しています。あなたがする必要があります：

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

(ラッピングにご注意ください。) jQuery メソッドは魔法のようにデフォルトの要素を拡張するわけではありません。最初にオブジェクトをラップする必要があります。

このバージョンが動作することに注意してください。

編集：

または、jQuery のコンストラクト (スコープ) の 2 番目のパラメーターを使用して、このコードを短くすることもできます。

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

EDITv2

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/

また、トムがリンクしたものは、奇妙な無限の点滅する不快感をもたらします。

$(function(){
    $('a.button').hover(
       function(){
         $(this).find('span').show('slow');
       },
       function(){
         $(this).find('span').hide('slow');
       }
    )
});
于 2011-06-16T22:28:13.733 に答える