同じページの異なるセレクタで同じjQuery文を使用できますか？

Question

これは簡単ではないようですが、私は少し問題に遭遇しました。私はページ上にSVGアイコンを表示しています。そのSVGアイコンを上に置くと、隠れたdivを表示するように状態を変更する必要があります。私はこれを行うための最初のアイコンを持っていますが、その後のアイコンは動作していません。私はcss（cursor：pointer;）が各アイコンに対してまだ機能しているので、問題をjQueryに絞り込んだが、表示されるはずのhidden divは表示されない。私の質問はこれです、私は私のSVGのそれぞれについて、この

$(".div-g").hover(
    function() { 
    $(this).find(".div-hidden").css("display","block"); 
    }, 
    function() { 
    $(this).find(".div-hidden").css("display","none"); 
    } 
); 

のような複数のjQueryのステートメントを持つことができます。たとえば、私は同じステートメントを使用しますが、単に "div"を "div1"に置き換えてください。私はなぜそうは見えないのですが、最初のアイコンのように単純ではない理由がわかりません。明確にするために、私のSVG年代のそれぞれは.div-gはSVGを表し、この

.div-g:hover { 
text-align: center; 
cursor: pointer; 
} 
.div-hidden { 
text-anchor: middle; 
text-align: center; 
font-size: .5rem; 
display: inline-block; 
position: center; 
} 
.div-hidden-rect { 
fill: $whiteblue; 
opacity: .96; 
} 

のように見えるこの

<rect style="display:none;" class="div-hidden div-hidden-rect" width="34.02" height="34.02"/> 
<text style="display:none;" class="div-hidden" x="8" y="10"> 

ように見えるクラスとCSSを持っています。だから、別のセレクタ、または私が見ていない何かと同じjQueryステートメントを使用して私の問題ですか？

Answer 1

この試してみてください：あなたのクラスセレクタは、例えば、マッチングクラスでdiv要素の任意の数と一致します

$('.div-g, .div1').hover(
    function(){ 
    $('.div-hidden').css({display: 'block'}); 
    }, function(){ 
    $('.div-hidden').css({display: 'none'}); 
    }); 

Answer 2

を：

<div id="div-1" class="svg-container"> 
    <rect style="display:none;" class="div-hidden div-hidden-rect" width="34.02" height="34.02"/> 
    <text style="display:none;" class="div-hidden" x="8" y="10"> 
</div> 

<div id="div-2" class="svg-container"> 
    <rect style="display:none;" class="div-hidden div-hidden-rect" width="34.02" height="34.02"/> 
    <text style="display:none;" class="div-hidden" x="8" y="10"> 
</div> 

<div id="div-3" class="svg-container"> 
    <rect style="display:none;" class="div-hidden div-hidden-rect" width="34.02" height="34.02"/> 
    <text style="display:none;" class="div-hidden" x="8" y="10"> 
</div> 

クラスの.svg-コンテナとすべてのdivを選択するだけで動作するはずです良い。

$(".svg-container").hover(
    function() { 
    $(this).find(".div-hidden").css("display","block"); 
    }, 
    function() { 
    $(this).find(".div-hidden").css("display","none"); 
    } 
); 

個々にスタイリングすることも簡単です。あなたはあなたのCSSで変数を使用しているので、私はそれがLESS/SASSであると仮定していますか？私が正しくあなたを理解していれば

.svg-container { 

    &:hover { 
     text-align: center; 
     cursor: pointer; 
    } 

    .div-hidden { 
     text-anchor: middle; 
     text-align: center; 
     font-size: .5rem; 
     display: inline-block; 
     position: center; 
    } 

    .div-hidden-rect { 
     opacity: .96; 
    } 
} 


#div-1 { 
    .div-hidden-rect { 
     fill: $whiteblue; 
    } 
} 

#div-2 { 
    .div-hidden-rect { 
     fill: $somethingelse; 
    } 
} 

#div-3 { 
    .div-hidden-rect { 
     fill: $somethingelseagain; 
    } 
} 

Answer 3

、あなたが本当に必要なのはある$(this).find(".an-hidden").toggle();

$(".hover-change").hover(function() { 
 
    $(this).find(".an-hidden").toggle(); 
 
});

.an-1 { 
 
     fill: #2ea3e4; 
 
     } 
 
.an-g:hover { 
 
\t text-align: center; 
 
\t cursor: pointer; 
 
} 
 
.an-hidden { 
 
\t text-anchor: middle; 
 
\t text-align: center; 
 
\t font-size: .5rem; 
 
\t display: inline-block; 
 
\t position: center; 
 
} 
 
.an-hidden-rect { 
 
\t fill: #F8FDF7; 
 
\t opacity: .96; 
 

 
} 
 
.an-hidden-text { 
 
\t fill: #2ea3e4; 
 
} 
 
.an-hidden-smtext { 
 
\t margin-top: 1rem; 
 
\t font-size: .15rem; 
 
\t fill: #2ea3e4; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg id="test_icon" data-name="Test Icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34.02 34.02"> 
 
    <defs> 
 
    
 
    </defs> 
 
    <title>analysis_icon</title> 
 
    <g class="an-g hover-change"> 
 
    <rect class="an-1" width="14.02" height="14.02"/> 
 
    <rect style="display:none;" class="an-hidden an-hidden-rect" width="14.02" height="14.02"/> 
 
    <text style="display:none;" class="an-hidden" x="8" y="10"> 
 
     <tspan x="50%" y="35%" dy=".1em" class="an-hidden-text">Text Title</tspan> 
 
     <tspan x="50%" dy="1.9em" class="an-hidden-smtext">text</tspan> 
 
     <tspan x="50%" dy="1.9em" class="an-hidden-smtext">more text</tspan> 
 
     <tspan x="50%" dy="1.9em" class="an-hidden-smtext">more more text</tspan> 
 
     </text>--> 
 

 
    </g> 
 
</svg> 
 
<svg id="test_icon2" data-name="Test Icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34.02 34.02"> 
 
    <defs> 
 
    
 
    </defs> 
 
    <title>analysis_icon</title> 
 
    <g class="an-b hover-change"> 
 
    <rect class="an-1" width="14.02" height="14.02"/> 
 
    <rect style="display:none;" class="an-hidden an-hidden-rect" width="14.02" height="14.02"/> 
 
    <text style="display:none;" class="an-hidden" x="8" y="10"> 
 
     <tspan x="50%" y="35%" dy=".1em" class="an-hidden-text">Text Title</tspan> 
 
     <tspan x="50%" dy="1.9em" class="an-hidden-smtext">text</tspan> 
 
     <tspan x="50%" dy="1.9em" class="an-hidden-smtext">more text</tspan> 
 
     <tspan x="50%" dy="1.9em" class="an-hidden-smtext">more more text</tspan> 
 
     </text>--> 
 

 
    </g> 
 
</svg> 
 
<svg id="test_icon3" data-name="Test Icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34.02 34.02"> 
 
    <defs> 
 
    
 
    </defs> 
 
    <title>analysis_icon</title> 
 
    <g class="an-d hover-change"> 
 
    <rect class="an-1" width="14.02" height="14.02"/> 
 
    <rect style="display:none;" class="an-hidden an-hidden-rect" width="14.02" height="14.02"/> 
 
    <text style="display:none;" class="an-hidden" x="8" y="10"> 
 
     <tspan x="50%" y="35%" dy=".1em" class="an-hidden-text">Text Title</tspan> 
 
     <tspan x="50%" dy="1.9em" class="an-hidden-smtext">text</tspan> 
 
     <tspan x="50%" dy="1.9em" class="an-hidden-smtext">more text</tspan> 
 
     <tspan x="50%" dy="1.9em" class="an-hidden-smtext">more more text</tspan> 
 
     </text>--> 
 

 
    </g> 
 
</svg>