单击div时JavaScript变量无法正确添加

时间:2013-07-08 03:05:37

标签: javascript jquery if-statement

我正在为彩弹团队建立一个网站。在主页面上有一小部分用于显示下一个事件的日期。

这是相关的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我做了一个小功能,当用户点击左箭头或右箭头时,更改不同标题的内容。这里的目标是让用户看到即将发生的事件,并可以回到之前的日期。

当我单击右箭头一次时,日期会发生变化,但如果再次单击右箭头,则会保留第二个日期。但是,如果我单击左箭头,它将返回到第一个日期。我可以用第一个和第二个日期返回第四个,但是当它从第二个到第三个时它似乎不会记录附加值。

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

这是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";
              }
        }

     }

谢谢!

1 个答案:

答案 0 :(得分:1)

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

更改类似于以下的行

else if (numero_date = 2) {

else if (numero_date == 2) {

每当它越过numero_date = 1(其中比较意图为numero_date == 1)时,该变量的值设置为1,它永远不会从那里改变,它总是在if条件中将其设置为1并且从不移动前进

<强> Demo

我不清楚你的请求但不是检查值,递增/递减计数器,你可以使用像pushpopshift,{等数组函数{3}}管理next / prev按钮和数据循环,如下所示:

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;


  }

<强> unshift