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 を使用して、ユーザーが左矢印または右矢印をクリックしたときに異なるヘッダーの内容を変更する小さな関数を作成しました。ここでの目標は、ユーザーが今後のイベントを確認し、以前の日付に戻ることができるようにすることです。

右矢印を 1 回クリックすると日付が変わりますが、もう一度右矢印をクリックすると 2 回目の日付のままになります。ただし、左矢印をクリックすると最初の日付に戻ります。1 番目と 2 番目の日付で前後に移動できますが、2 番目から 3 番目に移動すると追加の値が登録されないようです。

これを行うにはもっと良い方法があるに違いないことはわかっていますが、迷っています。他の日付も追加する必要があります。

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などの配列関数を使用して、次/前のボタンと次のようなデータの循環を管理できます。

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 に答える