選択した各要素のjQueryが一緒に実行されます

Question

フェーディング要素用のjQueryスクリプトを作成します。

しかし、私が<a class='sow'></a>要素の1つをホバーすると、 jQueryは、
<a class='sow'></a>要素のすべてに影響します。 たとえば、最初に選択した要素にカーソルを移動すると、他の要素も影響を受けます（フェーディング）。

私が望むもの：選択した要素にカーソルを移動すると、他の要素は影響を受けません。

スクリプト：

私はこの問題を解決するにはどうすればよい

$(".sow").hover(
function() { 
    $(".leftinf").show("slow"); 
    $(".rightinf").show("slow"); 
}, 
function() { 
    $(".leftinf").hide("slow"); 
    $(".rightinf").hide("slow"); 
}) 

？

私の悪い英語のための#sorry：/

コードabovを含むそのブログ：www.howtopc.cf

Answer 1

あなたはこの文脈で$(this)オブジェクトを使用する必要があり、

$(".sow").hover(function() { 
    $(".leftinf,.rightinf", $(this).next(".informasi")).show("slow"); 
},function() { 
    $(".leftinf,.rightinf", $(this).next(".informasi")).hide("slow"); 
}); 

• .next()関数はすぐ次の兄弟を選択します。
• $("selector", context)は、指定されたコンテキストで セレクタに基づいて要素を選択します。

Answer 2

このことを避けるためのベストプラクティスは、idを基準にして要素を対象にする必要があります。したがって、idでターゲットを設定すると、問題が解決する可能性があります。 は、ケースであなたはこれを試してみてくださいクラスによって、それをターゲットにしたい：

HTML：

<button id="button"> 
    Button 
</button> 
<div class="mainDiv"> 
<div class="leftinf"> 
    Left Inf 
</div> 

<div class="rightinf"> 
    Right Inf 
</div> 
</div> 

はJQuery：

$("#button").hover(function() { 
    $(".mainDiv").toggle(); 
}); 

私はこれが、この通過し、あなたの問題を解決すると思います。 作業フィドル：Fiddle Link