獲取具有相同類的元素的id

Question

我有多個帶有printPic類的div框，它們有自己唯一的id。 在懸停/放出時，切換printPicOverlay的顯示，該printPicOverlay是printPicOverlay的子printPic 。 我現在設置它的方式，所有ID的printPicOverlay在懸停時切換。

對於每個個人ID，在懸停時顯示/隱藏printPicOverlay的最佳方法是什么？

 $(".printPic").hover(function () { $(".printPicOverlay").toggle(); }, function () { $(".printPicOverlay").toggle(); }); 

 .printPic{ height: 10em; width: 10em; display: inline-block; background: red; position: relative; } .printPicOverlay{ height: 100%; width: 100%; background: rgba(0,0,0,0.4); display: none; position: absolute; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class = "printPic" id = "1"> <div class = "printPicOverlay"></div> </div> <div class = "printPic" id = "2"> <div class = "printPicOverlay"></div> </div> <div class = "printPic" id = "3"> <div class = "printPicOverlay"></div> </div> 

Answer 1

只是為了添加另一種選擇 - 這在純CSS中非常簡單，沒有任何Javascript / JQuery：

 .printPic { height: 10em; width: 10em; display: inline-block; background: red; position: relative; } .printPicOverlay { height: 100%; width: 100%; background: rgba(0,0,0,0.4); display: none; position: absolute; } .printPic:hover .printPicOverlay { display: block; } 

 <div class="printPic" id="1"> <div class="printPicOverlay"></div> </div> <div class="printPic" id="2"> <div class="printPicOverlay"></div> </div> <div class="printPic" id="3"> <div class="printPicOverlay"></div> </div> 

它也可能更高效 - 使用本機瀏覽器功能而不是通過jquery查找元素。

文檔:hover pseudoclass

如果您想要為疊加外觀設置動畫，可以進行一些調整（ visibility而不是display等）：

 .printPic { height: 10em; width: 10em; display: inline-block; background: red; position: relative; } .printPicOverlay { height: 100%; width: 100%; background: rgba(0,0,0,0.4); position: absolute; visibility: hidden; opacity: 0; transform: scale(0.8) translate(0, 10%); transition: visibility 0s, opacity 0.5s ease-in, transform 0.3s ease-in; } .printPic:hover .printPicOverlay { transform: scale(1); visibility: visible; opacity: 1; } 

 <div class="printPic" id="1"> <div class="printPicOverlay"></div> </div> <div class="printPic" id="2"> <div class="printPicOverlay"></div> </div> <div class="printPic" id="3"> <div class="printPicOverlay"></div> </div> 

Answer 2

您可以使用類似於下面的$(this).find() 。

jQuery 發現的是，通過指定的選擇器.printPicOverlay獲取所有后代，並僅切換那些匹配的元素。

使用$(this)將僅使用當前懸停的元素的上下文。

 $(".printPic").hover(function () { $(this).find(".printPicOverlay").toggle(); }, function () { $(this).find(".printPicOverlay").toggle(); }); 

 .printPic{ height: 10em; width: 10em; display: inline-block; background: red; position: relative; } .printPicOverlay{ height: 100%; width: 100%; background: rgba(0,0,0,0.4); display: none; position: absolute; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class = "printPic" id = "1"> <div class = "printPicOverlay"></div> </div> <div class = "printPic" id = "2"> <div class = "printPicOverlay"></div> </div> <div class = "printPic" id = "3"> <div class = "printPicOverlay"></div> </div> 

Answer 3

而是使用$(this) ，與$(this).find()類似：

$(this).find(".printPicOverlay").toggle();

看看下面的代碼：

 $(".printPic").hover(function () { $(this).find(".printPicOverlay").toggle(); }, function () { $(this).find(".printPicOverlay").toggle(); }); 

 .printPic{ height: 10em; width: 10em; display: inline-block; background: red; position: relative; } .printPicOverlay{ height: 100%; width: 100%; background: rgba(0,0,0,0.4); display: none; position: absolute; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class = "printPic" id = "1"> <div class = "printPicOverlay"></div> </div> <div class = "printPic" id = "2"> <div class = "printPicOverlay"></div> </div> <div class = "printPic" id = "3"> <div class = "printPicOverlay"></div> </div> 

希望這可以幫助！

Answer 4

這個問題是因為你需要使用this關鍵字來find()的.printPicOverlay元素懸停內 .printPic ，就像這樣：

 $(".printPic").hover(function() { $(this).find(".printPicOverlay").toggle(); }); 

 .printPic { height: 10em; width: 10em; display: inline-block; background-color: red; position: relative; } .printPicOverlay { height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.4); display: none; position: absolute; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="printPic" id="1"> <div class="printPicOverlay"></div> </div> <div class="printPic" id="2"> <div class="printPicOverlay"></div> </div> <div class="printPic" id="3"> <div class="printPicOverlay"></div> </div> 

但是 ，單獨使用CSS會更好，更簡單。 根本不需要JS：

 .printPic { height: 10em; width: 10em; display: inline-block; background-color: red; position: relative; } .printPicOverlay { height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.4); display: none; position: absolute; } .printPic:hover .printPicOverlay { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="printPic" id="1"> <div class="printPicOverlay"></div> </div> <div class="printPic" id="2"> <div class="printPicOverlay"></div> </div> <div class="printPic" id="3"> <div class="printPicOverlay"></div> </div> 

Answer 5

$('#' + $(this).attr('id') + '> div').toggle(100);// with little animation

只是一種不同的方法; 我寧願只使用@helb的CSS。

雖然你已經超過了元素; 通過切換，您可以實現目標。 如果你願意，可以用一點動畫。

 $(function(){ $(".printPic").hover(function () { $('#' + $(this).attr('id') + '> div').toggle(100); }); }); 

 .printPic{ height: 10em; width: 10em; display: inline-block; background: red; position: relative; } .printPicOverlay{ height: 100%; width: 100%; background: rgba(0,0,0,0.4); display: none; position: absolute; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class = "printPic" id = "1"> <div class = "printPicOverlay"></div> </div> <div class = "printPic" id = "2"> <div class = "printPicOverlay"></div> </div> <div class = "printPic" id = "3"> <div class = "printPicOverlay"></div> </div>