2

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

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

     }

谢谢 ！

4

1 回答 1

1

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

换行类似如下

else if (numero_date = 2) {

至

else if (numero_date == 2) {

每当它交叉numero_date = 1（打算进行比较numero_date == 1）时，该变量的值被设置为 1，从那里永远不会改变它总是在 if 条件下将其设置为 1，并且永远不会向前移动

演示

我不清楚你的要求，但不是检查值，增加/减少计数器，你可以使用数组函数，如push，pop，shift，unshift来管理 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;


  }

演示

于 2013-07-08T03:11:43.713 回答