0

同じID名の複数のdivがあるサイトがあります。このIDを持つすべてのdivにmouseleave関数を設定したいと思います。私の$(document).ready関数にはこのコードがあります...

$('#my_post_container').mouseleave(function(e)
{
    hideSnippet();
});

私のhideSnippet()関数は正しいですが、これを行うと、divがidで表示されるのは初めてmouseleave関数を設定するだけmy_post_containerです。このIDを持つすべてのdivにmouseleave関数を設定する方法はありますか？

4

4 に答える 4

2

同じIDを持つ複数のオブジェクトを持つことは無効なHTMLです。そのため、通常のセレクターを使用してすべてを見つけることはできません。そのため、HTMLを修正してそれを行わないようにする必要があります。

一番の提案は、同じIDを持つ複数のオブジェクトが含まれないようにHTMLを修正することです。クラス名を使用すると、次のように、jQueryセレクターを使用してgetElementsByClassName()またはまたはを使用してすべてを選択できます。querySelectorAll()

$('.my_post_container')

同じIDを持つ複数のオブジェクトを使用することを主張する場合（悪い選択）、そのIDを持つ可能性のあるすべてのオブジェクトを手動で反復処理する必要があります。

$("div[id='my_post_container']");

ただし、ブラウザは組み込みのセレクタエンジンロジックを使用できないため、これはかなり非効率的であり、jQueryがこれを最適化することを決定した場合、将来的に機能しなくなる可能性があります。あなたは本当にクラス名の使用に切り替える必要があります。

于 2013-02-27T19:28:25.507 に答える
2

同じID名の複数のdivがあるサイトがあります。

次に、それを修正する必要があります。同じ。を持つ要素を複数持つことはできませんid。id値はページ上で一意である必要があります。

class代わりに使用することをお勧めします。その時点で、コードは基本的に問題ありません。

$('.my_post_container').mouseleave(function(e)
{
    hideSnippet();
});

hideSnippet...どの引数を取得するかを気にせず、気にthisせず、返さない場合は少し短縮されますがfalse：

$('.my_post_container').mouseleave(hideSnippet);
于 2013-02-27T19:28:31.083 に答える
1

同じページに同じで複数の要素を含めることはできませんid。classここに示すように、代わりに使用してください。

HTML：

<div class="my_post_container">...</div>
<div class="my_post_container">...</div>
<div class="my_post_container">...</div>

jQuery：

$('.my_post_container').mouseleave(function(e)
{
    hideSnippet();
});
于 2013-02-27T19:29:02.613 に答える
0

まず、同じID名のdiv要素があってはなりません。まず、クラス名を同じに保つことでそれを解決する必要があります。

次に、マウスを離れて一部を入力します。

 $(".testClass").on({
  mouseenter : function() {
          $(this).css({"background-color" : "blue"});
  },
  mouseleave : function() {
          $(this).css({"background-color" : "green"});
  }
 });

これは動作するはずです..jsサンプルを追加しますhttp://jsfiddle.net/meVc6/

そして、cssを使用しても同じことが達成できます。

cssを追加するだけです.testClass:hover { background-color:blue}

于 2013-02-27T19:48:17.343 に答える