1

いくつかのブロックでのjqueryの影響に問題があります。Mouseenterとmouseleaveは、最初のdivブロックでのみ機能しますが、他のすべてのブロックでは機能しません。

これがJSです：

$（document）.ready（function（）{

     $（'＃mainbox'）。mouseenter（
         働き （） {
           $（'＃infobox'）。fadeIn（）;
         }）;
     $（'＃mainbox'）。mouseleave（
         働き （） {
           $（'＃infobox'）。fadeOut（）;
         }）;

   }）;

また、ブロック：

<div id="mainbox"><div id="infobox" style="display: none;">first block - it works on      this one</div></div>

<div id="mainbox"><div id="infobox" style="display: none;">2nd block - it doesn't work/div></div>

<div id="mainbox"><div id="infobox" style="display: none;">3rd block - it doesn't work</div></div>

問題が何であるかについて何か考えがありますか？

4

2 に答える 2

2

問題は次のとおりです。そのセレクターは、ドキュメントの最初のメインボックス内の最初のインフォボックスのみを対象としています。

APIでは、次のように読むことができます。

各id値は、ドキュメント内で1回だけ使用する必要があります。複数の要素に同じIDが割り当てられている場合、そのIDを使用するクエリは、DOMで最初に一致した要素のみを選択します。ただし、この動作に依存するべきではありません。同じIDを使用する複数の要素を持つドキュメントは無効です。

そして、それがあなたのコードが機能しない理由です。

ヒント：IDをクラスに切り替え、マウスイベントをバインドして、次のようにdiv内を検索します。

$('.mainbox').mouseenter(
  function () {
    $(this).find('.infobox').fadeIn();
  }); 

$('.mainbox').mouseleave(
  function () {
    $(this).find('.infobox').fadeOut();
});
于 2013-02-01T14:54:40.473 に答える
0

IDをクラスに変更します。

<div class="mainbox"><div class="infobox" style="display: none;">first block - it works on      this one</div></div>


<div class="mainbox"><div class="infobox" style="display: none;">2nd block - it doesn't work/div></div>

<div class="mainbox"><div class="infobox" style="display: none;">3rd block - it doesn't work</div></div>

次にJSで：

$(document).ready(function() {

 $('.mainbox').mouseenter(
     function () {
       $(this).find('.infobox').fadeIn();
     }); 
 $('.mainbox').mouseleave(
     function () {
       $(this).find('.infobox').fadeOut();
     });
});
于 2013-02-01T14:53:11.733 に答える