Question

我写了这个JS来试图让setTimout在点击时使用＆＃34; clearTimeout＆＃34;来清除。我面临的问题是它只在第一次刷新后才能运行。应该发生的是代码应该清除超时，因此这些年将停止在导航中进行。功能＆＃34; addtoev＆＃34;包含应该停止代码的函数。

我在这里有一个指向我的codepen的链接：

https://codepen.io/paula_athena/pen/MGrGyy

我的JS很乱，因为我实际上不知道如何编码，但我希望我至少可以暂停清除

    var year2002;

    var year2003;

    var year2005;

    var year2007;

    var year2009;

    var year2011;

    var year2013;

    var year2015;

    var year2017;


    document.addEventListener("DOMContentLoaded", function autoPlay() {


    window.addEventListener("load",function() {   addtoev(); });


    function addtoev() {

   var bns = document.getElementsByClassName("cls-10");for (i = 0; i < 
   bns.length; i++) {


        bns[i].addEventListener("click", function(event) {


            clearTimeout(year2002);
            clearTimeout(year2003);
            clearTimeout(year2005);
            clearTimeout(year2007);
            clearTimeout(year2009);
            clearTimeout(year2011);
            clearTimeout(year2013);
            clearTimeout(year2015);
            clearTimeout(year2017);


          // alert("This element was clicked.");
         });   } }




    year2002 = window.setTimeout(function(){

$("#_2002").removeClass("hidden");  
$("#_2002 rect").addClass("color_change");   
$("#rect_02").addClass("blue_selected");   
$('#2002 text').addClass("text_wht");    
$('#asterisks_02').removeClass("hidden");


    }, 1000);


    year2003 = window.setTimeout(function()   {
        $("#_2003").removeClass("hidden");
        $("#_2003 rect").addClass("color_change");
        $("#_2002 rect").removeClass("color_change");
        $("#rect_02").removeClass("blue_selected");
        $("#rect_03").addClass("blue_selected");
        $('#2003 text').addClass("text_wht");
        $('#2002 text').removeClass("text_wht");
        $('#asterisks_03').removeClass("hidden");
        $('#asterisks_02').addClass("hidden");


      }, 3000);


    year2005 = window.setTimeout(function()

      {
        $("#_2005").removeClass("hidden");
        $("#_2005 rect").addClass("color_change");
        $("#_2003 rect").removeClass("color_change");
        $("#rect_03").removeClass("blue_selected");
        $("#rect_05").addClass("blue_selected");
        $('#2005 text').addClass("text_wht");
        $('#2003 text').removeClass("text_wht");
        $('#asterisks_05').removeClass("hidden");
        $('#asterisks_03').addClass("hidden");


    }, 5000);

    year2007 = window.setTimeout(function()

      {
        $("#_2007").removeClass("hidden");
        $("#_2007 rect").addClass("color_change");
        $("#_2005 rect").removeClass("color_change");
        $("#rect_05").removeClass("blue_selected");
        $("#rect_07").addClass("blue_selected");
        $('#2007 text').addClass("text_wht");
        $('#2005 text').removeClass("text_wht");
        $('#asterisks_05').addClass("hidden");

    }, 7000);



    year2009 = window.setTimeout(function(){

     $("#_2009").removeClass("hidden");   
     $("#_2009 rect").addClass("color_change");   
     $("#_2007 rect").removeClass("color_change");   
     $("#rect_07").removeClass("blue_selected");   
     $("#rect_09").addClass("blue_selected");   
     $('#2009 text').addClass("text_wht");   
     $('#2007 text').removeClass("text_wht");    
     $('#asterisks_09').removeClass("hidden");

      }, 9000);


    year2011 = window.setTimeout(function()   {
        $("#_2011").removeClass("hidden");
        $("#_2011 rect").addClass("color_change");
        $("#_2009 rect").removeClass("color_change");
        $("#rect_09").removeClass("blue_selected");
        $("#rect_11").addClass("blue_selected");
        $('#2011 text').addClass("text_wht");
        $('#2009 text').removeClass("text_wht");
         $('#asterisks_11').removeClass("hidden");
         $('#asterisks_09').addClass("hidden");

      }, 11000);


    year2013 = window.setTimeout(function()

      {
        $("#_2013").removeClass("hidden");
        $("#_2013 rect").addClass("color_change");
        $("#_2011 rect").removeClass("color_change");
            $("#rect_11").removeClass("blue_selected");
        $("#rect_13").addClass("blue_selected");
            $('#2013 text').addClass("text_wht");
         $('#2011 text').removeClass("text_wht");
         $('#asterisks_11').addClass("hidden");

    }, 13000);

    year2015 = window.setTimeout(function()

      {
        $("#_2015").removeClass("hidden");
        $("#_2015 rect").addClass("color_change");
        $("#_2013 rect").removeClass("color_change");
        $("#rect_13").removeClass("blue_selected");
        $("#rect_15").addClass("blue_selected");
            $('#2015 text').addClass("text_wht");
         $('#2013 text').removeClass("text_wht");
             $('#asterisks_15').removeClass("hidden");
          $('#asterisks_11').addClass("hidden");

    }, 15000);

    year2017 = window.setTimeout(function()

      {
        $("#_2017").removeClass("hidden");
        $("#_2017 rect").addClass("color_change");
        $("#_2005 rect").removeClass("color_change");
        $("#rect_15").removeClass("blue_selected");
        $("#rect_17").addClass("blue_selected");
        $('#2017 text').addClass("text_wht");
        $('#2015 text').removeClass("text_wht");
        $('#asterisks_17').removeClass("hidden");
        $('#asterisks_15').addClass("hidden");

    }, 17000);

Answer 1

问题是点击侦听器没有被执行，因为你必须在没有字母的地方点击按钮。尝试将侦听器更改为按钮容器。

尝试更改此行：

bns[i].addEventListener("click", function(event) {...

对于这个：

bns[i].parentElement.addEventListener("click", function(event) {...

Answer 2

首先，不要为每年更改的内容声明多个变量，最好使用数组来存储值，因为无论何时每次都清除所有值。

var timeouts = [];

// Add them to the array like this
timeouts.push(setTimeout(function(){ /*...*/ }, 1000));

// And clear them like this
for (let i = 0 ; i < timeouts.length ; i++) {
    clearTimeout(timeouts[i]);
}

其次，我会将所有这些“按钮”包装在一个组标记中，并将click事件处理程序放在父项上，而不是像你一样附加多个事件处理程序：

<g id="button-tray">
  <g id="2017">
    <rect id="rect_17" class="cls-10" x="708.07" y="550.46" width="65.91" height="47.54"></rect>
    <text class="cls-19" transform="translate(727.98 593.05)">MR</text>
    <text class="cls-20" transform="translate(716.05 571.44)">2017</text>
  </g>
  <!-- ... --> 
  <g id="2002">
    <rect id="rect_02" class="cls-10" x="41.09" y="550.46" width="65.91" height="47.54"></rect>
    <text class="cls-19" transform="translate(60.72 593.05)">MR</text>
    <text class="cls-20" transform="translate(50.1 571.44)">2002</text>
  </g>
</g>

然后你可以像这样附上处理程序：

$("#button-tray").addEventListener("click", function(event) {
    console.log(event.target); // This is how you reference the clicked element

    for (let i = 0 ; i < timeouts.length ; i++) {
        clearTimeout(timeouts[i]);
    }
});

第三，也是最重要的是，单击按钮上的文本时，不会触发click事件。您可以使用以下代码对此进行测试：

bns[i].addEventListener("click", function(event) {
  console.log("TEST");
}

要解决您的问题，如果添加父元素，以下代码将起作用：

var timeouts = [];

document.addEventListener("DOMContentLoaded", function autoPlay() {

    window.addEventListener("load",function() {
        addtoev();
    });

    function addtoev() {
      $(#'button-tray').addEventListener("click", function(event) {
            for (let i = 0 ; i < timeouts.length ; i++) {
                clearTimeout(timeouts[i]);
            }
         });
      }
    }

    timeouts.push(window.setTimeout(function() {
      $("#_2002").removeClass("hidden");
      $("#_2002 rect").addClass("color_change");
      $("#rect_02").addClass("blue_selected");
      $('#2002 text').addClass("text_wht");
      $('#asterisks_02').removeClass("hidden");
    }, 1000));

    timeouts.push(window.setTimeout(function() {
        $("#_2003").removeClass("hidden");
        $("#_2003 rect").addClass("color_change");
        $("#_2002 rect").removeClass("color_change");
        $("#rect_02").removeClass("blue_selected");
        $("#rect_03").addClass("blue_selected");
        $('#2003 text').addClass("text_wht");
        $('#2002 text').removeClass("text_wht");
        $('#asterisks_03').removeClass("hidden");
        $('#asterisks_02').addClass("hidden");
    }, 3000));

    timeouts.push(window.setTimeout(function() {
        $("#_2005").removeClass("hidden");
        $("#_2005 rect").addClass("color_change");
        $("#_2003 rect").removeClass("color_change");
        $("#rect_03").removeClass("blue_selected");
        $("#rect_05").addClass("blue_selected");
        $('#2005 text').addClass("text_wht");
        $('#2003 text').removeClass("text_wht");
        $('#asterisks_05').removeClass("hidden");
        $('#asterisks_03').addClass("hidden");
    }, 5000));

    timeouts.push(window.setTimeout(function() {
        $("#_2007").removeClass("hidden");
        $("#_2007 rect").addClass("color_change");
        $("#_2005 rect").removeClass("color_change");
        $("#rect_05").removeClass("blue_selected");
        $("#rect_07").addClass("blue_selected");
        $('#2007 text').addClass("text_wht");
        $('#2005 text').removeClass("text_wht");
        $('#asterisks_05').addClass("hidden");
    }, 7000));

    timeouts.push(window.setTimeout(function() {
      $("#_2009").removeClass("hidden");
      $("#_2009 rect").addClass("color_change");
      $("#_2007 rect").removeClass("color_change");
      $("#rect_07").removeClass("blue_selected");
      $("#rect_09").addClass("blue_selected");
      $('#2009 text').addClass("text_wht");
      $('#2007 text').removeClass("text_wht");
      $('#asterisks_09').removeClass("hidden");
    }, 9000));

    timeouts.push(window.setTimeout(function() {
        $("#_2011").removeClass("hidden");
        $("#_2011 rect").addClass("color_change");
        $("#_2009 rect").removeClass("color_change");
        $("#rect_09").removeClass("blue_selected");
        $("#rect_11").addClass("blue_selected");
        $('#2011 text').addClass("text_wht");
        $('#2009 text').removeClass("text_wht");
        $('#asterisks_11').removeClass("hidden");
        $('#asterisks_09').addClass("hidden");
      }, 11000));

    timeouts.push(window.setTimeout(function() {
        $("#_2013").removeClass("hidden");
        $("#_2013 rect").addClass("color_change");
        $("#_2011 rect").removeClass("color_change");
        $("#rect_11").removeClass("blue_selected");
        $("#rect_13").addClass("blue_selected");
        $('#2013 text').addClass("text_wht");
        $('#2011 text').removeClass("text_wht");
        $('#asterisks_11').addClass("hidden");
    }, 13000));

    timeouts.push(window.setTimeout(function() {
        $("#_2015").removeClass("hidden");
        $("#_2015 rect").addClass("color_change");
        $("#_2013 rect").removeClass("color_change");
        $("#rect_13").removeClass("blue_selected");
        $("#rect_15").addClass("blue_selected");
        $('#2015 text').addClass("text_wht");
        $('#2013 text').removeClass("text_wht");
        $('#asterisks_15').removeClass("hidden");
        $('#asterisks_11').addClass("hidden");
    }, 15000));

    timeouts.push(window.setTimeout(function() {
        $("#_2017").removeClass("hidden");
        $("#_2017 rect").addClass("color_change");
        $("#_2005 rect").removeClass("color_change");
        $("#rect_15").removeClass("blue_selected");
        $("#rect_17").addClass("blue_selected");
        $('#2017 text').addClass("text_wht");
        $('#2015 text').removeClass("text_wht");
        $('#asterisks_17').removeClass("hidden");
        $('#asterisks_15').addClass("hidden");
    }, 17000));

});

clearTimeout仅适用于SVG的页面重装JavaScript

2 个答案: