jQueryのこれは私のhtmlファイル内のコードである

Question

同じ名前を持つすべての要素に影響を与える：

<div id="centerBlock"> 
     <block> 
      <site style="padding-top: 10px; margin-left: 20px"> 
       <img src="./images/site1.png" alt="some_text"/> 
      </site> 
      <textOnImage style="padding-top: 10px; margin-left: 20px"> 
       lolol 
      </textOnImage> 
     </block> 

     <block> 
      <site style="padding-top: 163px; margin-left: 20px"> 
       <img src="./images/site1.png" alt="some_text"/> 
      </site> 
      <textOnImage style="padding-top: 163px; margin-left: 20px"> 
       lolol 
      </textOnImage> 
     </block> 

    </div> 

そして、これが私のjavascriptです。しかし

$("block").mouseenter(function(){   
    $("site").fadeTo("slow", 0.25); 
    $("textOnImage").animate({ 
     opacity: "1" 
    }, 600); 
}); 

$("block").mouseleave(function(){   
    $("site").fadeTo("slow", 1); 
    $("textOnImage").animate({ 
     opacity: "0" 
    }, 600); 
}); 

、私は2つのブロックの1にカーソルを合わせると要素の両方が不透明になってしまい、マウスを元の状態に戻すよりもマウスを動かすと、元の状態に戻ります。私は何時間も検索しましたが、私は間違った言葉を検索してきたことを100％確信しています。どのように個別に行うのですか？

Answer 1

thisを使用して、イベントをトリガーしたブロックのみを対象とし、.find()を使用して、その特定のブロック内の目的の要素を検索します。あなたがこれまでやっていたやり方は明らかに、すべてのsite要素と、すべてのページ内のすべてのtextOnImage要素を、イベントをトリガしたブロック内の要素だけでなく見つけていました。

$("block").mouseenter(function(){   
    var $this = $(this); 
    $this.find("site").fadeTo("slow", 0.25); 
    $this.find("textOnImage").animate({ 
     opacity: "1" 
    }, 600); 
}); 

$("block").mouseleave(function(){   
    var $this = $(this); 
    $this.find("site").fadeTo("slow", 1); 
    $this.find("textOnImage").animate({ 
     opacity: "0" 
    }, 600); 
}); 

Answer 2

ホバリングされた要素の構造にトラバースする必要があります。あなたはthisは、ハンドラがバインドされている要素への参照で、イベントハンドラ内でこのような.find() ...

$("block").mouseenter(function(){   
    $(this).find("site").fadeTo("slow", 0.25); 
    $(this).find("textOnImage").animate({ 
     opacity: "1" 
    }, 600); 
}); 

$("block").mouseleave(function(){   
    $(this).find("site").fadeTo("slow", 1); 
    $(this).find("textOnImage").animate({ 
     opacity: "0" 
    }, 600); 
}); 

を使用することができます。

.find()の代わりに.children()を使用することもできます。対象となる要素は1レベルしかないからです。

---

サイドノート、あなたは.hover()を使用しており、このような二つの機能を渡すことができます。..

$("block").hover(function(){   
    $(this).find("site").fadeTo("slow", 0.25); 
    $(this).find("textOnImage").animate({ 
     opacity: "1" 
    }, 600); 
}, 
    function(){   
    $(this).find("site").fadeTo("slow", 1); 
    $(this).find("textOnImage").animate({ 
     opacity: "0" 
    }, 600); 
}); 

あなたはおそらく、あなたのfadeToとanimate呼び出し前にいくつか.stop()呼び出しを追加したいと思う、そうでないときマウスを素早く押したり外したりすると、アニメーションはキューにバックアップされます。

Answer 3

（特定の要素をターゲットにjqueryのセレクタにthisコンテキストを提供）、これを試してみてください：

$("block").mouseenter(function(){   
    $("site", this).fadeTo("slow", 0.25); 
    $("textOnImage", this).animate({ 
     opacity: "1" 
    }, 600); 
}); 

$("block").mouseleave(function(){   
    $("site", this).fadeTo("slow", 1); 
    $("textOnImage", this).animate({ 
     opacity: "0" 
    }, 600); 
});