如何动态定义 jQuery 选择器？
[英]How can I define jQuery selectors dynamically?
问题描述
I would like to make a dynamic mouseover/mouseleave jQuery function.
我想做一个动态鼠标悬停/鼠标离开 jQuery function。 Currently only the first element is covered by the function as shown in the attached snippet.目前，function 仅涵盖第一个元素，如所附代码片段所示。 But I also want to make the other elements work without having to set up one jQuery function per object.但我也想让其他元素工作，而不必根据 object 设置一个 jQuery function。
The DOMs are structured in such way that there are 1x wrapper, 1x tooltip DOM and 1x circle DOM created per element in the JSON return. DOM 的结构方式是在 JSON 返回中为每个元素创建 1x 包装器、1x 工具提示 DOM 和 1x 圆形 DOM。
Is there are proper way to achieve this?是否有适当的方法来实现这一目标？
In advance thank you for your help.预先感谢您的帮助。
$(document).ready(function() { $(document).on("mouseover", "#id10", function() { $("#tooltip10").show(); }); $(document).on("mouseleave", "#id10", function() { $("#tooltip10").hide(); }); });
#mainContent.thirdRow.column { display: inline-block; position: relative; } #mainContent.LatestResults { color: #919191; font-weight: bold; padding-right: 5px; padding-top: 8px; padding-left: 10px; font-size: 15px; text-align: center; vertical-align: middle; } #mainContent.resultData.tooltip { height: 100px; width: 100px; top: 20px; left: 50%; transform: translateX(-45%); position: absolute; text-align: center; vertical-align: middle; float: left; background-color: #ADADAD; color: #FFF; border-radius: 10px; padding-top: 10px; z-index: 5; } #mainContent.resultData { padding-right: 6px; padding-left: 3px; padding-top: 6px; vertical-align: middle; float: left; z-index: -1; } #mainContent.datapointred { display: inline-block; margin-left: 12px; height: 15px; width: 15px; border-radius: 50%; background-color: #FF5B5B; vertical-align: middle; -webkit-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91); -moz-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91); box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91); } #mainContent.datapointgreen { display: inline-block; margin-left: 12px; height: 15px; width: 15px; border-radius: 50%; background-color: #00DC8E; vertical-align: middle; -webkit-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91); -moz-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91); box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91); } #mainContent.datapointblue { display: inline-block; margin-left: 12px; height: 15px; width: 15px; border-radius: 50%; background-color: #4B49AE; vertical-align: middle; -webkit-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.91); -moz-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.91); box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.91); }
<body> <div id="mainContent"> <div class="thirdRow"> <div class="resultData column"> <div class="resultWrapper10 column"> <div class="datapointgreen datapoint" id="id10"></div> <table class="tooltip" style="" id="tooltip10"> <tbody> <tr> <td>Hometeam</td> <td>2</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>0</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper18 column"> <div class="datapointgreen datapoint" id="id18"></div> <table class="tooltip" style="display:none" id="tooltip18"> <tbody> <tr> <td>Hometeam</td> <td>1</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>6</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper21 column"> <div class="datapointblue datapoint" id="id21"></div> <table class="tooltip" style="display:none" id="tooltip21"> <tbody> <tr> <td>Hometeam</td> <td>1</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>1</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper37 column"> <div class="datapointgreen datapoint" id="id37"></div> <table class="tooltip" style="display:none" id="tooltip37"> <tbody> <tr> <td>Hometeam</td> <td>1</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>2</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper45 column"> <div class="datapointgreen datapoint" id="id45"></div> <table class="tooltip" style="display:none" id="tooltip45"> <tbody> <tr> <td>Hometeam</td> <td>0</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>3</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper1110 column"> <div class="datapointred datapoint" id="id1110"></div> <table class="tooltip" style="display:none" id="tooltip1110"> <tbody> <tr> <td>Hometeam</td> <td>2</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>1</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper53 column"> <div class="datapointgreen datapoint" id="id53"></div> <table class="tooltip" style="display:none" id="tooltip53"> <tbody> <tr> <td>Hometeam</td> <td>5</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>0</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper65 column"> <div class="datapointgreen datapoint" id="id65"></div> <table class="tooltip" style="display:none" id="tooltip65"> <tbody> <tr> <td>Hometeam</td> <td>0</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>2</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper1115 column"> <div class="datapointgreen datapoint" id="id1115"></div> <table class="tooltip" style="display:none" id="tooltip1115"> <tbody> <tr> <td>Hometeam</td> <td>2</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>1</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> </div> </div> </div> </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
6 个解决方案
解决方案1
2 2019-10-16 10:54:31
Two solutions for you:为您提供两种解决方案：
Still using JavaScript仍在使用 JavaScript
Use a class on all of the elements you want the handlers to handle, not an ID.在您希望处理程序处理的所有元素上使用 class，而不是 ID。 IDs are by their nature required to be unique. ID 本质上要求是唯一的。 Within the handler, use this so you know which element the event targeted, and from that find the tooltip:在处理程序中，使用this以便您知道事件针对哪个元素，并从中找到工具提示：
$(document).ready(function() {
$(document).on("mouseover", ".datapoint", function() {
$(this).nextAll(".tooltip").show();
});
$(document).on("mouseleave", ".datapoint", function() {
$(this).nextAll(".tooltip").hide();
});
});
Live Example:现场示例：
$(document).ready(function() { $(document).on("mouseover", ".datapoint", function() { $(this).nextAll(".tooltip").show(); }); $(document).on("mouseleave", ".datapoint", function() { $(this).nextAll(".tooltip").hide(); }); });
#mainContent.thirdRow.column { display: inline-block; position: relative; } #mainContent.LatestResults { color: #919191; font-weight: bold; padding-right: 5px; padding-top: 8px; padding-left: 10px; font-size: 15px; text-align: center; vertical-align: middle; } #mainContent.resultData.tooltip { height: 100px; width: 100px; top: 20px; left: 50%; transform: translateX(-45%); position: absolute; text-align: center; vertical-align: middle; float: left; background-color: #ADADAD; color: #FFF; border-radius: 10px; padding-top: 10px; z-index: 5; } #mainContent.resultData { padding-right: 6px; padding-left: 3px; padding-top: 6px; vertical-align: middle; float: left; z-index: -1; } #mainContent.datapointred { display: inline-block; margin-left: 12px; height: 15px; width: 15px; border-radius: 50%; background-color: #FF5B5B; vertical-align: middle; -webkit-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91); -moz-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91); box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91); } #mainContent.datapointgreen { display: inline-block; margin-left: 12px; height: 15px; width: 15px; border-radius: 50%; background-color: #00DC8E; vertical-align: middle; -webkit-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91); -moz-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91); box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91); } #mainContent.datapointblue { display: inline-block; margin-left: 12px; height: 15px; width: 15px; border-radius: 50%; background-color: #4B49AE; vertical-align: middle; -webkit-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.91); -moz-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.91); box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.91); }
<body> <div id="mainContent"> <div class="thirdRow"> <div class="resultData column"> <div class="resultWrapper10 column"> <div class="datapointgreen datapoint" id="id10"></div> <table class="tooltip" style="" id="tooltip10"> <tbody> <tr> <td>Hometeam</td> <td>2</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>0</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper18 column"> <div class="datapointgreen datapoint" id="id18"></div> <table class="tooltip" style="display:none" id="tooltip18"> <tbody> <tr> <td>Hometeam</td> <td>1</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>6</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper21 column"> <div class="datapointblue datapoint" id="id21"></div> <table class="tooltip" style="display:none" id="tooltip21"> <tbody> <tr> <td>Hometeam</td> <td>1</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>1</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper37 column"> <div class="datapointgreen datapoint" id="id37"></div> <table class="tooltip" style="display:none" id="tooltip37"> <tbody> <tr> <td>Hometeam</td> <td>1</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>2</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper45 column"> <div class="datapointgreen datapoint" id="id45"></div> <table class="tooltip" style="display:none" id="tooltip45"> <tbody> <tr> <td>Hometeam</td> <td>0</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>3</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper1110 column"> <div class="datapointred datapoint" id="id1110"></div> <table class="tooltip" style="display:none" id="tooltip1110"> <tbody> <tr> <td>Hometeam</td> <td>2</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>1</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper53 column"> <div class="datapointgreen datapoint" id="id53"></div> <table class="tooltip" style="display:none" id="tooltip53"> <tbody> <tr> <td>Hometeam</td> <td>5</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>0</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper65 column"> <div class="datapointgreen datapoint" id="id65"></div> <table class="tooltip" style="display:none" id="tooltip65"> <tbody> <tr> <td>Hometeam</td> <td>0</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>2</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper1115 column"> <div class="datapointgreen datapoint" id="id1115"></div> <table class="tooltip" style="display:none" id="tooltip1115"> <tbody> <tr> <td>Hometeam</td> <td>2</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>1</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> </div> </div> </div> </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Using CSS instead改用 CSS
You can use the fact that the tooltip is a sibling of the div that triggers it to do this with CSS:您可以使用工具提示是div的兄弟这一事实来触发它使用 CSS 执行此操作：
.datapoint + .tooltip {
display: none;
}
.datapoint:hover + .tooltip {
display: block;
}
Live Example:现场示例：
#mainContent.thirdRow.column { display: inline-block; position: relative; } #mainContent.LatestResults { color: #919191; font-weight: bold; padding-right: 5px; padding-top: 8px; padding-left: 10px; font-size: 15px; text-align: center; vertical-align: middle; } #mainContent.resultData.tooltip { height: 100px; width: 100px; top: 20px; left: 50%; transform: translateX(-45%); position: absolute; text-align: center; vertical-align: middle; float: left; background-color: #ADADAD; color: #FFF; border-radius: 10px; padding-top: 10px; z-index: 5; } #mainContent.resultData { padding-right: 6px; padding-left: 3px; padding-top: 6px; vertical-align: middle; float: left; z-index: -1; } #mainContent.datapointred { display: inline-block; margin-left: 12px; height: 15px; width: 15px; border-radius: 50%; background-color: #FF5B5B; vertical-align: middle; -webkit-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91); -moz-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91); box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91); } #mainContent.datapointgreen { display: inline-block; margin-left: 12px; height: 15px; width: 15px; border-radius: 50%; background-color: #00DC8E; vertical-align: middle; -webkit-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91); -moz-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91); box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91); } #mainContent.datapointblue { display: inline-block; margin-left: 12px; height: 15px; width: 15px; border-radius: 50%; background-color: #4B49AE; vertical-align: middle; -webkit-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.91); -moz-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.91); box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.91); }.datapoint +.tooltip { display: none; }.datapoint:hover +.tooltip { display: block; }
<body> <div id="mainContent"> <div class="thirdRow"> <div class="resultData column"> <div class="resultWrapper10 column"> <div class="datapointgreen datapoint" id="id10"></div> <table class="tooltip" style="" id="tooltip10"> <tbody> <tr> <td>Hometeam</td> <td>2</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>0</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper18 column"> <div class="datapointgreen datapoint" id="id18"></div> <table class="tooltip" id="tooltip18"> <tbody> <tr> <td>Hometeam</td> <td>1</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>6</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper21 column"> <div class="datapointblue datapoint" id="id21"></div> <table class="tooltip" id="tooltip21"> <tbody> <tr> <td>Hometeam</td> <td>1</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>1</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper37 column"> <div class="datapointgreen datapoint" id="id37"></div> <table class="tooltip" id="tooltip37"> <tbody> <tr> <td>Hometeam</td> <td>1</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>2</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper45 column"> <div class="datapointgreen datapoint" id="id45"></div> <table class="tooltip" id="tooltip45"> <tbody> <tr> <td>Hometeam</td> <td>0</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>3</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper1110 column"> <div class="datapointred datapoint" id="id1110"></div> <table class="tooltip" id="tooltip1110"> <tbody> <tr> <td>Hometeam</td> <td>2</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>1</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper53 column"> <div class="datapointgreen datapoint" id="id53"></div> <table class="tooltip" id="tooltip53"> <tbody> <tr> <td>Hometeam</td> <td>5</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>0</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper65 column"> <div class="datapointgreen datapoint" id="id65"></div> <table class="tooltip" id="tooltip65"> <tbody> <tr> <td>Hometeam</td> <td>0</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>2</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper1115 column"> <div class="datapointgreen datapoint" id="id1115"></div> <table class="tooltip" id="tooltip1115"> <tbody> <tr> <td>Hometeam</td> <td>2</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>1</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> </div> </div> </div> </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Be sure to remove the inline style="display:none" on the tooltips as above.请务必如上所述删除工具提示上的内联style="display:none" 。
解决方案2
1 已采纳 2019-10-16 10:46:41
You can use this selector [id^=id] , id^=id means every id that starts with id您可以使用此选择器[id^=id] ， id^=id表示每个以 id 开头的 id
$(document).ready(function() {
$(document).on("mouseover", "[id^=id]", function() {
$(this).next("table").show();
});
$(document).on("mouseleave", "[id^=id]", function() {
$(".tooltip").hide();
});
});
Demo演示
$(document).ready(function() { $(document).on("mouseover", "[id^=id]", function() { $(this).next("table").show(); }); $(document).on("mouseleave", "[id^=id]", function() { $(".tooltip").hide(); }); });
#mainContent.thirdRow.column { display: inline-block; position: relative; } #mainContent.LatestResults { color: #919191; font-weight: bold; padding-right: 5px; padding-top: 8px; padding-left: 10px; font-size: 15px; text-align: center; vertical-align: middle; } #mainContent.resultData.tooltip { height: 100px; width: 100px; top: 20px; left: 50%; transform: translateX(-45%); position: absolute; text-align: center; vertical-align: middle; float: left; background-color: #ADADAD; color: #FFF; border-radius: 10px; padding-top: 10px; z-index: 5; } #mainContent.resultData { padding-right: 6px; padding-left: 3px; padding-top: 6px; vertical-align: middle; float: left; z-index: -1; } #mainContent.datapointred { display: inline-block; margin-left: 12px; height: 15px; width: 15px; border-radius: 50%; background-color: #FF5B5B; vertical-align: middle; -webkit-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91); -moz-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91); box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91); } #mainContent.datapointgreen { display: inline-block; margin-left: 12px; height: 15px; width: 15px; border-radius: 50%; background-color: #00DC8E; vertical-align: middle; -webkit-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91); -moz-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91); box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91); } #mainContent.datapointblue { display: inline-block; margin-left: 12px; height: 15px; width: 15px; border-radius: 50%; background-color: #4B49AE; vertical-align: middle; -webkit-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.91); -moz-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.91); box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.91); }
<body> <div id="mainContent"> <div class="thirdRow"> <div class="resultData column"> <div class="resultWrapper10 column"> <div class="datapointgreen datapoint" id="id10"></div> <table class="tooltip" style="" id="tooltip10"> <tbody> <tr> <td>Hometeam</td> <td>2</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>0</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper18 column"> <div class="datapointgreen datapoint" id="id18"></div> <table class="tooltip" style="display:none" id="tooltip18"> <tbody> <tr> <td>Hometeam</td> <td>1</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>6</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper21 column"> <div class="datapointblue datapoint" id="id21"></div> <table class="tooltip" style="display:none" id="tooltip21"> <tbody> <tr> <td>Hometeam</td> <td>1</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>1</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper37 column"> <div class="datapointgreen datapoint" id="id37"></div> <table class="tooltip" style="display:none" id="tooltip37"> <tbody> <tr> <td>Hometeam</td> <td>1</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>2</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper45 column"> <div class="datapointgreen datapoint" id="id45"></div> <table class="tooltip" style="display:none" id="tooltip45"> <tbody> <tr> <td>Hometeam</td> <td>0</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>3</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper1110 column"> <div class="datapointred datapoint" id="id1110"></div> <table class="tooltip" style="display:none" id="tooltip1110"> <tbody> <tr> <td>Hometeam</td> <td>2</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>1</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper53 column"> <div class="datapointgreen datapoint" id="id53"></div> <table class="tooltip" style="display:none" id="tooltip53"> <tbody> <tr> <td>Hometeam</td> <td>5</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>0</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper65 column"> <div class="datapointgreen datapoint" id="id65"></div> <table class="tooltip" style="display:none" id="tooltip65"> <tbody> <tr> <td>Hometeam</td> <td>0</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>2</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper1115 column"> <div class="datapointgreen datapoint" id="id1115"></div> <table class="tooltip" style="display:none" id="tooltip1115"> <tbody> <tr> <td>Hometeam</td> <td>2</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>1</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> </div> </div> </div> </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
解决方案3
1 2019-10-16 10:49:44
Try below code please请尝试以下代码
<script>
$(document).ready(function () {
$(document).on("mouseover", ".datapoint", function () {
$(this).parent().find(".tooltip").show();
});
$(document).on("mouseleave", ".datapoint", function () {
$(this).parent().find(".tooltip").hide();
});
});
</script>
解决方案4
1 2019-10-16 10:55:55
use classes instead of ids, and you don't need javascript for that, you all you need is css使用类而不是 ids，你不需要 javascript，你只需要 css
.tooltip{display:none}/*use this instead of the inline-styling*/
[id^="id"]:hover + [id^="tooltip"]{
display:block;
}
here is the demo这是演示
#mainContent.thirdRow.column { display: inline-block; position: relative; } #mainContent.LatestResults { color: #919191; font-weight: bold; padding-right: 5px; padding-top: 8px; padding-left: 10px; font-size: 15px; text-align: center; vertical-align: middle; } #mainContent.resultData.tooltip { height: 100px; width: 100px; top: 20px; left: 50%; transform: translateX(-45%); position: absolute; text-align: center; vertical-align: middle; float: left; background-color: #ADADAD; color: #FFF; border-radius: 10px; padding-top: 10px; z-index: 5; } #mainContent.resultData { padding-right: 6px; padding-left: 3px; padding-top: 6px; vertical-align: middle; float: left; z-index: -1; } #mainContent.datapointred { display: inline-block; margin-left: 12px; height: 15px; width: 15px; border-radius: 50%; background-color: #FF5B5B; vertical-align: middle; -webkit-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91); -moz-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91); box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91); } #mainContent.datapointgreen { display: inline-block; margin-left: 12px; height: 15px; width: 15px; border-radius: 50%; background-color: #00DC8E; vertical-align: middle; -webkit-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91); -moz-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91); box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91); } #mainContent.datapointblue { display: inline-block; margin-left: 12px; height: 15px; width: 15px; border-radius: 50%; background-color: #4B49AE; vertical-align: middle; -webkit-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.91); -moz-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.91); box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.91); }.tooltip{display:none} [id^="id"]:hover + [id^="tooltip"]{ display:block; }
<body> <div id="mainContent"> <div class="thirdRow"> <div class="resultData column"> <div class="resultWrapper10 column"> <div class="datapointgreen datapoint" id="id10"></div> <table class="tooltip" style="" id="tooltip10"> <tbody> <tr> <td>Hometeam</td> <td>2</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>0</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper18 column"> <div class="datapointgreen datapoint" id="id18"></div> <table class="tooltip" id="tooltip18"> <tbody> <tr> <td>Hometeam</td> <td>1</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>6</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper21 column"> <div class="datapointblue datapoint" id="id21"></div> <table class="tooltip" id="tooltip21"> <tbody> <tr> <td>Hometeam</td> <td>1</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>1</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper37 column"> <div class="datapointgreen datapoint" id="id37"></div> <table class="tooltip" id="tooltip37"> <tbody> <tr> <td>Hometeam</td> <td>1</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>2</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper45 column"> <div class="datapointgreen datapoint" id="id45"></div> <table class="tooltip" id="tooltip45"> <tbody> <tr> <td>Hometeam</td> <td>0</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>3</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper1110 column"> <div class="datapointred datapoint" id="id1110"></div> <table class="tooltip" id="tooltip1110"> <tbody> <tr> <td>Hometeam</td> <td>2</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>1</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper53 column"> <div class="datapointgreen datapoint" id="id53"></div> <table class="tooltip" id="tooltip53"> <tbody> <tr> <td>Hometeam</td> <td>5</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>0</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper65 column"> <div class="datapointgreen datapoint" id="id65"></div> <table class="tooltip" id="tooltip65"> <tbody> <tr> <td>Hometeam</td> <td>0</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>2</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper1115 column"> <div class="datapointgreen datapoint" id="id1115"></div> <table class="tooltip" id="tooltip1115"> <tbody> <tr> <td>Hometeam</td> <td>2</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>1</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> </div> </div> </div> </body>
解决方案5
1 2019-10-16 11:18:25
Instead of id we can use class.我们可以使用 class 代替 id。 Using this (self reference operator ) we can get the child element having class tooltip by function find() which look into child elements.使用这个（自引用运算符），我们可以通过查找子元素的 function find() 获得具有 class 工具提示的子元素。
$(document).on("mouseenter", ".datapoint", function() {
$(this).find(".tooltip").show();
});
$(document).on("mouseleave", ".datapoint", function() {
$(this).find(".tooltip").hide();
});
解决方案6
0 2019-10-16 10:54:27
Use wild card on id when mouseenter , mouseleave . mouseenter和mouseleave时在 id 上使用通配符。 Catch the id to show tool tip and based upon that hide show.捕获 id 以显示工具提示并基于该隐藏显示。
let $id = $("[id^=id]"); let id = ''; $('.tooltip').hide(); $id.mouseenter(function() { id = $(this).attr('id').split('id')[1]; $("#tooltip" + id).show(); }).mouseleave(function() { $("#tooltip" + id).hide(); });
#mainContent.thirdRow.column { display: inline-block; position: relative; } #mainContent.LatestResults { color: #919191; font-weight: bold; padding-right: 5px; padding-top: 8px; padding-left: 10px; font-size: 15px; text-align: center; vertical-align: middle; } #mainContent.resultData.tooltip { height: 100px; width: 100px; top: 20px; left: 50%; transform: translateX(-45%); position: absolute; text-align: center; vertical-align: middle; float: left; background-color: #ADADAD; color: #FFF; border-radius: 10px; padding-top: 10px; z-index: 5; } #mainContent.resultData { padding-right: 6px; padding-left: 3px; padding-top: 6px; vertical-align: middle; float: left; z-index: -1; } #mainContent.datapointred { display: inline-block; margin-left: 12px; height: 15px; width: 15px; border-radius: 50%; background-color: #FF5B5B; vertical-align: middle; -webkit-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91); -moz-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91); box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91); } #mainContent.datapointgreen { display: inline-block; margin-left: 12px; height: 15px; width: 15px; border-radius: 50%; background-color: #00DC8E; vertical-align: middle; -webkit-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91); -moz-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91); box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91); } #mainContent.datapointblue { display: inline-block; margin-left: 12px; height: 15px; width: 15px; border-radius: 50%; background-color: #4B49AE; vertical-align: middle; -webkit-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.91); -moz-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.91); box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.91); }
<body> <div id="mainContent"> <div class="thirdRow"> <div class="resultData column"> <div class="resultWrapper10 column"> <div class="datapointgreen datapoint" id="id10"></div> <table class="tooltip" style="" id="tooltip10"> <tbody> <tr> <td>Hometeam</td> <td>2</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>0</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper18 column"> <div class="datapointgreen datapoint" id="id18"></div> <table class="tooltip" style="display:none" id="tooltip18"> <tbody> <tr> <td>Hometeam</td> <td>1</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>6</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper21 column"> <div class="datapointblue datapoint" id="id21"></div> <table class="tooltip" style="display:none" id="tooltip21"> <tbody> <tr> <td>Hometeam</td> <td>1</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>1</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper37 column"> <div class="datapointgreen datapoint" id="id37"></div> <table class="tooltip" style="display:none" id="tooltip37"> <tbody> <tr> <td>Hometeam</td> <td>1</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>2</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper45 column"> <div class="datapointgreen datapoint" id="id45"></div> <table class="tooltip" style="display:none" id="tooltip45"> <tbody> <tr> <td>Hometeam</td> <td>0</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>3</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper1110 column"> <div class="datapointred datapoint" id="id1110"></div> <table class="tooltip" style="display:none" id="tooltip1110"> <tbody> <tr> <td>Hometeam</td> <td>2</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>1</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper53 column"> <div class="datapointgreen datapoint" id="id53"></div> <table class="tooltip" style="display:none" id="tooltip53"> <tbody> <tr> <td>Hometeam</td> <td>5</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>0</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper65 column"> <div class="datapointgreen datapoint" id="id65"></div> <table class="tooltip" style="display:none" id="tooltip65"> <tbody> <tr> <td>Hometeam</td> <td>0</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>2</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> <div class="resultWrapper1115 column"> <div class="datapointgreen datapoint" id="id1115"></div> <table class="tooltip" style="display:none" id="tooltip1115"> <tbody> <tr> <td>Hometeam</td> <td>2</td> <td>3 (1)</td> </tr> <tr> <td>hometeam</td> <td>1</td> <td>2 (1)</td> </tr> <tr> <td>Venue</td> <td>Emirates</td> </tr> </tbody> </table> </div> </div> </div> </div> </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何创建动态jquery选择器？ - How can I create dynamic jquery selectors?
我如何计算它们？ jQuery 选择器 - How can I count them? jQuery selectors
如何结合两个jQuery选择器？ - How can I combine two jQuery selectors?
如何使用JQuery通过Selectors替换IF？ - How Can I replace IF by Selectors with JQuery?
如何在jQuery选择器中更轻松地使用+ =？ - How can I use += with jQuery selectors easier?
我可以结合使用jQuery选择器吗？ - Can I combine jQuery selectors?
如何了解jQuery选择器如何在幕后工作？ - How can I learn how jQuery selectors work behind the scenes?
如何在不使用选择器的情况下对jQuery对象进行分组？ - How can I group jQuery objects without using selectors?
如何从jQuery选择器访问javascript方法 - How can I access javascript methods from jQuery selectors
如何使用jQuery选择器/过滤器在XML中找到特定的子节点？ - How can I find a specific subnode in XML with jQuery selectors/filters?
相关标签