如何重置 a.click 切换 function？

Question

I'm making a infographic slider and I have buttons when clicked that reveal text. When I go to the next slider and then hit the previous button and go back my toggles reveal the text and then bounce back to be invisible.

Here is some of the code... I'm not sure if I should be resetting the css or Javascript div where each button is held? Please tell me how I can fix the toggle issue.

 $( "#point1" ).click(function() { $( "#timeline1" ).toggle( "slow", function() { // Animation complete. }); }); $( "#point2" ).click(function() { $( "#timeline2" ).toggle( "slow", function() { // Animation complete. }); }); $( "#point3" ).click(function() { $( "#timeline3" ).toggle( "slow", function() { // Animation complete. }); }); $( "#point4" ).click(function() { $( "#timeline4" ).toggle( "slow", function() { // Animation complete. }); }); $( "#point5" ).click(function() { $( "#timeline5" ).toggle( "slow", function() { // Animation complete. }); }); / next and previous navigation functions function showNextScreen() { // check if nav is active if (navActive) { // disable nav navActive = false; // targets the current screen currentScreen = "#screen" + screenNum; // sets next screen number screenNum++; // show/hide nav showHideNav(screenNum); // targets the next screen nextScreen = "#screen" + screenNum; // transitions current screen out gsap.fromTo(currentScreen, { x: 0 }, { duration: duration, delay: 0.5, x: -960, ease: "power2.inOut" }); // shows next screen $(nextScreen).show(); // transitions next screen in gsap.fromTo(nextScreen, { x: 960 }, { duration: duration, delay: 0.5, x: 0, ease: "power2.inOut", onComplete: function() { // hide current screen $(currentScreen).hide(); // enable nav navActive = true; } }); // load function to animate on contents of screen window["loadScreen" + screenNum](); // stop voiceover from playing $("#voiceover").trigger("pause"); } } function showPrevScreen() { // check if nav is active if (navActive) { // disable nav navActive = false; // targets the current screen currentScreen = "#screen" + screenNum; // sets next screen number screenNum--; // show/hide nav showHideNav(screenNum); // targets the next screen prevScreen = "#screen" + screenNum; // transitions current screen out gsap.fromTo(currentScreen, { x: 0 }, { duration: duration, delay: 0.5, x: 960, ease: "power4.inOut" }); // shows previous screen $(prevScreen).show(); // transitions next screen in gsap.fromTo(prevScreen, { x: -960 }, { duration: duration, delay: 0.5, x: 0, ease: "power2.inOut", onComplete: function() { // hide current screen $(currentScreen).hide(); // enable nav navActive = true; } }); // load function to animate on contents of screen window["loadScreen" + screenNum](); // stop voiceover from playing $("#voiceover").trigger("pause"); } } // next and previous button clicks $("#next").click(showNextScreen); $("#prev").click(showPrevScreen);

 #point1 { position: absolute; top: 20%; left: 8%; transform: translate(-50%, -50%); width: 45px; cursor: pointer; }

 <img src="img/SVG/point1.svg" alt="fact" id="point1" class="point"/> <img src="img/SVG/point2.svg" alt="fact" id="point2" class="point"/> <img src="img/SVG/point3.svg" alt="fact" id="point3"class="point" /> <img src="img/SVG/point4.svg" alt="fact" id="point4"class="point" /> <img src="img/SVG/point5.svg" alt="fact" id="point5" class="point"/> <div id="prev">BACK</div> <div id="next">NEXT</div>

Answer 1

You need to use jquery's .off() method to remove the previous click event handler before adding .click() to the #points . Try this code

$( "#point1" ).off('click').click(function() {
    $( "#timeline1" ).toggle("slow");
});

$( "#point2" ).off('click').click(function() {
    $( "#timeline2" ).toggle("slow");
});

$( "#point3" ).off('click').click(function() {
    $( "#timeline3" ).toggle("slow");
});

$( "#point4" ).off('click').click(function() {
    $( "#timeline4" ).toggle("slow");
});

$( "#point5" ).off('click').click(function() {
    $( "#timeline5" ).toggle("slow");
});