如何重置 .click 切换功能？答案

【问题标题】：How would I reset a .click toggle function?如何重置 .click 切换功能？
【发布时间】：2022-02-02 14:25:07
【问题描述】：

我正在制作一个信息图表滑块，点击显示文本时我有按钮。当我转到下一个滑块然后点击上一个按钮并返回时，我的切换显示文本，然后弹回不可见。

这是一些代码...我不确定是否应该重置每个按钮所在的 css 或 Javascript div？请告诉我如何解决切换问题。

$( "#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>

【问题讨论】：

除了最后一次按下按钮的时间线之外，您希望另一条时间线消失吗？需要更多 HTML 来理解结构。如果“local”没有运行 sn-p 所需的库，您也可以使用“外部 sn-p 编辑器”资源共享您的代码，例如 link。
请分享相关的html。我在您提供的按钮中没有看到任何按钮。
@Vladimir 如果您访问我的网站，您可以看到该项目以获得更好的上下文。它称为交互式信息图。我的网站是hannahblue.ca
@ruleboy21 如果您访问我的网站，您可以看到该项目以获得更好的上下文。它称为交互式信息图。我的网站是hannahblue.ca

标签： javascript html jquery css animation

【解决方案1】：

在将.click() 添加到#points 之前，您需要使用jquery 的.off() 方法删除之前的点击事件处理程序。试试这个代码

$( "#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");
});

【讨论】：