I'm writing a code that will popup a text wrapped in array and display each text with forEach function. Here's the sample code.
var hotSpots =
[
{
id : 'svc1', // 1
text: 'Radiator Repair',
spotPosition: 'left: 0em; top: 14.5em',
textPosition: 'left: -4em;',
arrowPosition: 'left: 0.5em;',
},
{
id : 'svc2', // 2
text: 'Headlight Blub Replacement / Repair',
spotPosition: 'left: 3em; top: 13em',
textPosition: 'left: -15em;',
arrowPosition: 'left: 12em;',
},
{
id : 'svc3', // 3
text: 'Engine Full Service / Repair',
spotPosition: 'left: 9em; top: 9.5em',
textPosition: 'left: -8em;',
arrowPosition: 'left: 3em;',
},
{
id : 'svc3b', // 8
text: 'Oil Charge & Lube',
spotPosition: 'left: 14em; top: 8.5em',
textPosition: 'left: -6em;',
arrowPosition: 'left: 3em;',
},
{
id : 'svc4', // 4
text: 'Wiper / Wiper Motor Repair',
spotPosition: 'left: 20em; top: 8em',
textPosition: 'left: -0.5em;',
arrowPosition: 'right: 12em;',
},
{
id : 'svc5', // 9
text: 'Windsheild Repair / Replace',
spotPosition: 'left: 28em; top: 5em',
textPosition: 'right: -10em;',
arrowPosition: 'right: 6em;',
},
{
id : 'svc6', // 11
text: 'Window Regulators',
spotPosition: 'left: 35em; top: 6em',
textPosition: 'right: -7.8em;',
arrowPosition: 'right: 6em;',
},
{
id : 'svc7',
text: 'Drive Axle Service',
spotPosition: 'right: 3em; top: 6em',
textPosition: 'right: -7.8em;',
arrowPosition: 'right: 6em;',
},
{
id : 'svc8',
text: 'Tune-ups for better Fuel Efficentcy',
spotPosition: 'right: 11.2em; top: 10.2em',
textPosition: 'left: -7.5em;',
arrowPosition: 'left: -1.6em;',
},
{
id : 'svc9',
text: 'Alignments',
spotPosition: 'right: 1.7em; top: 13em',
textPosition: 'left: -2em;',
arrowPosition: 'left: -1.6em;',
},
{
id : 'svc10', // 13
text: 'Exhaust Pipe and Mufflers Install / Repair',
spotPosition: 'right: 3em; top: 20.5em',
textPosition: 'left: -9em;',
arrowPosition: 'left: -1.6em;',
},
{
id : 'svc10b', // 10
text: 'ABS Brakes',
spotPosition: 'right: 15.8em; top: 19em;',
textPosition: 'left: -2.2em;',
arrowPosition: 'left: -1.6em;',
},
{
id : 'svc11', //
text: 'Heating Systems',
spotPosition: 'left: 38em; top: 11em',
textPosition: 'left: -3.2em;',
arrowPosition: 'left: -1.6em;',
},
{
id : 'svc12',
text: 'A/C Service',
spotPosition: 'left: 12.5em; bottom: 4em',
textPosition: 'left: -2em;',
arrowPosition: 'left: -1.6em;',
},
{
id : 'svc13', // 6
text: 'Tire Repair and Sales',
spotPosition: 'left: 14em; bottom: 11.4em',
textPosition: 'left: -4.3em;',
arrowPosition: 'left: -1.6em;',
},
{
id : 'svc14', // 7
text: 'Brake Systems',
spotPosition: 'left: 11.5em; bottom: 7em',
textPosition: 'left: -3em;',
arrowPosition: 'left: -1.6em;',
},
{
id : 'svc15', // 5
text: 'Suspension & Steering',
spotPosition: 'left: 14em; bottom: 13em',
textPosition: 'left: -2em;',
arrowPosition: 'left: -7em;',
}
];
Here's how I extracted the data from var hotSpots.
hotSpots.forEach(function(data){
var element = data.id;
var popups = setInterval(function(i){
$('.svchotSpotWrapper').removeClass('show');
$('#'+element).addClass('show');
}, 4000 + offset);
offset += 4000;
$(document).on('click', '#'+element, function(){
$('.svchotSpotWrapper').removeClass('show');
$(this).addClass('show');
clearInterval(popups);
});
});
The code above will output multiple dots, and what I am trying to achieve is when I click on a certain dot, the interval will stop.
The following code is what I already tried:
$(document).on('click', '#'+element, function(){
$('.svchotSpotWrapper').removeClass('show');
$(this).addClass('show');
clearInterval(popups);
});
However, it doesn't stop the interval.
You could pass popups
variable in jQuery as a parameter and access it in event.data
for individual click events:
hotSpots.forEach(function(data) {
var element = data.id;
var popups = setInterval(function(i) {
$('.svchotSpotWrapper').removeClass('show');
$('#' + element).addClass('show');
}, 4000 + offset);
offset += 4000;
$(document).on('click', '#' + element, { popupInterval: popups },
function(event) {
$('.svchotSpotWrapper').removeClass('show');
$(this).addClass('show');
clearInterval(event.data.popupInterval);
});
});
EDIT
In order to clear the multiple intervals you may have collect them in an array and clear them all at once:
var popups = [];
hotSpots.forEach(function(data) {
var element = data.id;
var popup = window.setInterval(function(i) {
$('.svchotSpotWrapper').removeClass('show');
$('#' + element).addClass('show');
}, 400 + offset);
popups.push(popup);
offset += 400;
$(document).on('click', '#' + element, function(event) {
$('.svchotSpotWrapper').removeClass('show');
$(this).addClass('show');
popups.forEach(function(popup) {
clearInterval(popup);
});
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.