我可以在同一頁面上使用與不同選擇器相同的jQuery語句嗎？

Question

這可能看起來微不足道，但我遇到了一個小問題。我的頁面上有SVG圖標，當它懸停時，應該改變狀態以顯示隱藏的div。我得到了第一個圖標來做到這一點，但後來的圖標不起作用。由於css（cursor：pointer;）仍然適用於每個圖標，但是隱藏的div應該不會顯示，所以我將問題縮小到了jQuery。我的問題是，我可以有多個這樣的jQuery語句

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

爲我的每個SVG的。因此，例如，我會使用相同的語句，但只需將「div」替換爲「div1」等等。我不明白爲什麼不，但我不確定它爲什麼不像第一個圖標那麼簡單。爲了清楚起見，我的每一個SVG的有看起來像這樣的

<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-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; 
} 

其中.div-g表示SVG類和CSS。那麼，我的問題是用不同的選擇器使用相同的jQuery語句，還是我沒有看到？

Answer 1

試試這個：

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

Answer 2

你的等級選擇將任意數量的div匹配匹配類，例如：

<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>