单击 div 时 JavaScript 变量未正确添加

Question

我正在为彩弹射击队制作网站。在主页上有一小部分显示下一个事件的日期。

这是相关的 HTML 代码:

    <aside class="aside-dates">

        <h1>PROCHAIN TOURNOI</h1>

        <h2 id="h2date">MIPL E4</h2>
        <h3 id="h3date">20 juillet 2013</h3>
        <h4 id="h4date">Mirabel, QC</h4>

        <div class="fleche gauche"></div>
        <div class="fleche droite"></div>

    </aside>

我使用 javascript 创建了一个小函数，当用户单击向左或向右箭头时更改不同 header 的内容。这里的目标是让用户看到即将发生的事件并可以回到以前的日期。

当我点击向右箭头一次时，日期会改变，但如果我再次点击向右箭头，日期将停留在第二个日期。但是，如果我单击左箭头，它将返回到第一个日期。我可以在第一个和第二个日期之间来回倒退，但是从第二个日期到第三个日期似乎不会记录附加值。

我知道一定有更好的方法来做到这一点，但我迷路了，我还需要添加其他日期。

这是 JS:

     var numero_date = 0;
     function clickDate(){
        if ( $(this).hasClass("gauche") ){
              numero_date--;
              if (numero_date <= 0){
                 alert(numero_date);
                 document.getElementById("h2date").innerHTML = "MIPL E4";
                 document.getElementById("h3date").innerHTML = "20 juillet 2013";
                 document.getElementById("h4date").innerHTML = "Mirabel, QC";
                 numero_date = 0;
              }
              else if(numero_date = 1){
                 alert(numero_date);
                 document.getElementById("h2date").innerHTML = "PSP";
                 document.getElementById("h3date").innerHTML = "16-18 août 2013";
                 document.getElementById("h4date").innerHTML = "Riverside, CA";
              }
              else if(numero_date = 2){
                 alert(numero_date);
                 document.getElementById("h2date").innerHTML = "MIPL Finales";
                 document.getElementById("h3date").innerHTML = "31 août 2013";
                 document.getElementById("h4date").innerHTML = "Mirabel, QC";
              }
        }
        else{
               numero_date++;
              if (numero_date <= 0){
                 alert(numero_date);
                 document.getElementById("h2date").innerHTML = "MIPL E4";
                 document.getElementById("h3date").innerHTML = "20 juillet 2013";
                 document.getElementById("h4date").innerHTML = "Mirabel, QC";
              }
              else if(numero_date = 1){
                 alert(numero_date);
                 document.getElementById("h2date").innerHTML = "PSP";
                 document.getElementById("h3date").innerHTML = "16-18 août 2013";
                 document.getElementById("h4date").innerHTML = "Riverside, CA";
              }
              else if(numero_date = 2){
                 alert(numero_date);
                 document.getElementById("h2date").innerHTML = "MIPL Finales";
                 document.getElementById("h3date").innerHTML = "31 août 2013";
                 document.getElementById("h4date").innerHTML = "Mirabel, QC";
              }
        }

     }

谢谢!

Answer 1

问题在于您使用赋值运算符 = 而不是比较运算符 ==。

修改类似下面的行

else if (numero_date = 2) {

到

else if (numero_date == 2) {

每当它越过 numero_date = 1(此处用于比较 numero_date == 1)时，该变量的值将设置为 1，它永远不会从那里改变它总是在if条件下设置为1，永不前进

Demo

我不清楚你的要求，但不是检查值，递增/递减计数器，你可以使用像 push 这样的数组函数, pop , shift , unshift像这样管理下一个/上一个按钮和数据循环:

var arrEvents = []; //Set up the array of events
  arrEvents.push({
      'event': 'MIPL E4',
          'date': '20 juillet 2013',
          'venue': 'Mirabel, QC'
  },{
      'event': 'PSP',
          'date': '16-18 août 2013',
          'venue': 'Riverside, CA'
  },{
      'event': 'MIPL Finales',
          'date': '31 août 2013',
          'venue': 'Mirabel, QC'
  });

  function clickDate() {
      var obj;

      if ($(this).is(".gauche")) {
          obj = arrQuestions.shift(); //get the element from top
          arrQuestions.push(obj); //push it to the end
          obj = arrQuestions[0];

      } else {
          obj = arrQuestions.pop(); //get the element from end
          arrQuestions.unshift(obj); //ush it to the top
          obj = arrQuestions[arrQuestions.length-1];
      }

      console.log(JSON.stringify(arrQuestions));
      document.getElementById("h2date").innerHTML = obj.event;
      document.getElementById("h3date").innerHTML = obj.date;
      document.getElementById("h4date").innerHTML = obj.venue;


  }

Demo