【发布时间】：2026-02-07 20:10:02
【问题描述】：
我遇到了一个点击事件只工作一次的问题 - 它应该切换 .p-active 类，而不是只添加它。
点击后使用lighttooltip.js动态添加了一些内容，但我认为它不会影响我的点击事件中的toggleClass函数，但不知何故，我需要解决那个。
我尝试使用document、"body"、".hotspots" 更改 on click 的委派，但所有这些都不起作用。使用 "div" 和 ".hotspot" 进行委派可以打开类，但不能关闭类。
然而，我确实注意到，在删除所有 .LiteTooltip jQuery 代码（在单击功能下方，这是单击“热点”后动态添加到页面的内容）后，我的单击功能按预期运行.
非常感谢您对此的任何帮助。我已经稍微缩短了代码，因为最初有 30 个“热点”，但降低到 3 个以使代码更易于阅读。
注意： 没有被切换的是热点号码本身 - 切换时它应该从粉红色变为白色。
/**** look inside tooltip CSS ****/
div#look-inside .et_pb_row {
width: 100% !important;
max-width: 1500px !important;
}
#tooltip-clickoutside {
/*z-index: 10;*/
}
.litetooltip-wrapper {
font: inherit;
}
.litetooltip-wrapper .tooltip-arrow {
border: none !important;
}
.litetooltip-wrapper .tooltip-content {
padding: 2em 10px !important;
background: transparent !important;
color: inherit !important;
min-width: 90px;
width: 100%;
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
width: 95%;
margin: 0 auto;
margin-left: auto;
}
.litetooltip-wrapper .tooltip-content .clear {
clear: both;
}
.litetooltip-wrapper .template h4 {
font-size: 250%;
color: #004023;
padding: 0 0 .5em;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.litetooltip-wrapper .template .content {
margin-top: 1em;
padding: 2.5% 2.5% !important;
display: block;
/* text-align: center; */
background: #f2edde;
float: none !important;
clear: both !important;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.template p {
background: #f2edde !important;
padding: 0 !important;
float: none !important;
font-size: 18px;
line-height: 1.8;
}
.redhotspot {
color: #fff;
text-align: center;
font-size: 24px;
line-height: 32px;
position: absolute;
z-index: 103;
width: 52px;
height: 52px;
background: #d11947;
-webkit-border-radius: 60px;
border-radius: 60px;
}
.redhotspot.p-active {
background: #fff;
color: #d11947;
}
.look-inside {
position: relative;
max-width: 1280px;
/* actual width of image*/
width: 100%;
height: auto;
z-index: 101;
overflow: hidden;
}
.look-inside .img-wrap {
position: relative;
height: 0px;
padding-bottom: 62.5%;
/* image-height / width * 100 */
}
.look-inside img {
position: absolute;
top: 0px;
left: 0px;
z-index: 102;
}
.item-gallery img {
display: none;
}
.item-gallery img.p-active {
display: block;
}
.left-arrow:before {
content: "\34";
}
.right-arrow:before {
content: "\35";
}
.left-arrow,
.right-arrow {
position: absolute;
cursor: pointer;
left: -webkit-calc(50% - 150px);
left: calc(50% - 150px);
top: 44px;
top: 2em;
height: 180px;
bottom: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
width: 90px;
-webkit-transition: all .2s;
-o-transition: all .2s;
transition: all .2s;
color: #9aa2b0;
}
.left-arrow:hover {
left: -webkit-calc(50% - 160px);
left: calc(50% - 160px);
color: #d11947;
}
.right-arrow:hover {
left: -webkit-calc(50% + 60px);
left: calc(50% + 60px);
color: #d11947;
}
.right-arrow {
left: -webkit-calc(50% + 50px);
left: calc(50% + 50px);
z-index: 1;
}
.left-arrow:before,
.right-arrow:before {
position: absolute;
top: 25%;
font-family: 'ETmodules';
font-size: 90px;
height: 90px;
width: 90px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.item-gallery {
position: relative;
width: 177px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin: 0 auto;
float: none !important;
clear: both !important;
}
.item-gallery.single-logo {
width: 212px !important;
}
@media screen and (max-width: 980px) {
.redhotspot {
font-size: 17px !important;
width: 18px;
height: 18px;
line-height: 18px;
}
}
body {
margin-bottom: 100px;
min-height: 800px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://paynefhstage.wpengine.com/wp-content/themes/Divi-child-01/look-inside/litetooltip.min.css" rel="stylesheet" />
<script src="https://paynefhstage.wpengine.com/wp-content/themes/Divi-child-01/look-inside/litetooltip.min.js"></script>
<div class="look-inside">
<div class="img-wrap">
<img alt="Look Inside" src="https://paynefhstage.wpengine.com/wp-content/uploads/Breckenridge.jpg">
</div>
<div class="hotspots">
<div class="hotspot" id="ihotspot1">
<div class="redhotspot" style="top: 20%; left: 44.5%; cursor: pointer;">1</div>
</div>
<div class="hotspot" id="ihotspot2">
<div class="redhotspot" style="top: 31.5%; left: 32.5%; cursor: pointer;">2</div>
</div>
<div class="hotspot" id="ihotspot3">
<div class="redhotspot" style="top: 43.5%; left: 18%; cursor: pointer;">3</div>
</div>
</div>
</div>
<div class="hotspot" id="tooltips"></div>
<script>
jQuery(document).ready(function($) {
//on hotspot click convert more than one image into gallery with arrows
var int = false;
$("div").on("click", ".redhotspot", function(e) {
e.preventDefault();
console.log($(this).parent().attr('id'), "clicked!");
$(this).toggleClass("p-active");
});
});
//All tooltip content lives below
jQuery('#ihotspot1').LiteTooltip({
textalign: 'left',
trigger: 'click',
opacity: 1,
padding: 0,
shadow: 0,
container: 'tooltips',
issticky: false,
title: '<div class="template ihotspot1">' +
'<div class="item-gallery">' +
'<img src="/wp-content/uploads/1.1Waterproofing.jpg" class="image_1_0" alt="Waterproofing" />' +
'<img src="/wp-content/uploads/1.2Waterproofing.jpg" class="image_1_1" alt="Waterproofing" />' +
'<img src="/wp-content/uploads/1.3Waterproofing.jpg" class="image_1_2" alt="Waterproofing" />' +
'<img src="/wp-content/uploads/1.4Waterproofing.jpg" class="image_1_3" alt="Waterproofing" />' +
'</div>' +
'<div class="content">' +
'<h4>Waterproofing Membrane</h4>' +
'<p>We start by broom sweeping the footing then spray a EPRO rubber polymer membrane to fill in all of the crevices. This goes far beyond building code, but we know this is a key factor in keeping your living space dry. This first step along with the 15 year warranty is just one way we prepare the foundation for years to come.</p> ' +
'</div>' +
'</div>'
});
jQuery('#ihotspot2').LiteTooltip({
textalign: 'left',
trigger: 'click',
opacity: 1,
padding: 0,
shadow: 0,
container: 'tooltips',
issticky: false,
title: '<div class="template ihotspot2">' +
'<div class="item-gallery">' +
'<img src="/wp-content/uploads/2.1ExteriorHydrochannel.jpg" class="image_1_0" alt="Exterior Hydro Channel" />' +
'</div>' +
'<div class="content">' +
'<h4>Exterior Hydro Channel</h4>' +
'<p>Exterior Hydro Channel is considered the jack of all trades when it comes to basement waterproofing. It collects any water that reaches your basement walls on the outside of the home and directs it to the sump pump, where it is routed out of and away from the foundation. This is just one facet of the entire system that is used to ensure the foundation, basement and interior of the home stay dry.</p> ' +
'</div>' +
'</div>'
});
jQuery('#ihotspot3').LiteTooltip({
textalign: 'left',
trigger: 'click',
opacity: 1,
padding: 0,
shadow: 0,
container: 'tooltips',
issticky: false,
title: '<div class="template ihotspot3">' +
'<div class="item-gallery">' +
'<img src="/wp-content/uploads/3.1InteriorHydroChannel.jpg" class="image_1_0" alt="Interior Hydro Channel" />' +
'</div>' +
'<div class="content">' +
'<h4>Interior Hydro Channel & Drainage System</h4>' +
'<p>Interior Hydro Channel acts as a natural passageway for water to drain to the sump bucket. This aspect of the foundation waterproofing system is placed between the basement floor and walls to ensure any water that travels under the basement floor has a path back outside. The interior hydro channel acts as an extra layer of insurance for finishing the lower level of a home.</p> ' +
'</div>' +
'</div>'
});
</script>如果您有任何问题，请告诉我:)
【问题讨论】：
标签： javascript html jquery css