2017-06-19 1 views
0

実際に私は2つの日付を比較する関数に取り組んでいます(私の隠れた入力から得た日付、別の日付 - 現在の日時)。私の日付の右側の違いを返す(各if文で)結果として、これらのconsole.logsのすべてを同じクラス名を持つ適切な入力フィールドにjavascript配列を解析します

var elements = document.getElementsByClassName("getTime"); 

     var names = []; 
     for(var i=0; i<elements.length; i++) { 
      names = elements[i].value; 
      var dece = moment(names).format(); 
      var cureTime = moment().format(); 
      seco=moment().diff(dece, 'seconds'); 
      if ((Math.floor(seco/60)) >= 1 && (Math.floor(seco/60))<60) { 
       console.log(Math.floor(seco/60) + " minutes"); 
       document.getElementsByClassName("time").innerHTML = Math.floor(seco/60) + " minutes ago"; 
      }else if(((Math.floor(seco/3600)) >= 1) && ((Math.floor(seco/3600))<24)) 
      { 
       console.log(Math.floor(seco/3600) + " hours"); 
       document.getElementsByClassName("time").innerHTML = Math.floor(seco/3600) + " hours ago"; 
      }else if (((Math.floor(seco/86400)) >= 1) && ((Math.floor(seco/86400)) <30)) 
      { 
       console.log(Math.floor(seco/86400) + " days"); 
       document.getElementsByClassName("time").innerHTML = Math.floor(seco/86400) + " days ago"; 
      }else if (((Math.floor(seco/2592000)) > 1) && ((Math.floor(seco/2592000)) <= 12)) 
      { 
       console.log(Math.floor(seco/2592000) + " months"); 
       document.getElementsByClassName("time").innerHTML = Math.floor(seco/2592000) + " months ago"; 
      }else if((Math.floor(seco/31536000)) > 1) 
      { 
       console.log(Math.floor(seco/31536000) + " years"); 
       document.getElementsByClassName("time").innerHTML = Math.floor(seco/31536000) + " years ago"; 
      } 
     } 

: 私は完璧に動作しますJSで関数を書きました。 しかし、私はどのようにこれらの違いをすべて同じクラス名の適切なスパンフィールドに解析できるのか理解できません。私のHTMLは次のようになります:

@foreach($repoData as $kek) 
    <span class="time" id="openedOn"></span> 
    <input type="hidden" class="getTime" id="time" value='{!! $kek->created_at !!}'> 
@endforeach 

このFOREACHは、私に隠れた入力に格納されているいくつかの日付を生成します。次に、この隠された入力から値を取得し、JSの関数に渡します。 私はどのように私のJS関数からそのスパンにクラス名 - "時間"と要素を解析する必要が理解できません。 助けてください。

+2

のgetElementsByClassNameは、HTMLコレクションではなく、単一の要素.... – epascarello

+0

https://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method – epascarello

+2

その 'getElements'を返します。 (複数)、配列を返します。 'document.getElementsByClassName(" time ")[0] .innerHTML' –

答えて

1

getElementsByClassName関数が配列を返す(here続きを読む)し、あなたはあなたが単に利用する必要があるループ内の要素にアクセスするので、したがって、あなたは、あなたのケースでは、その要素

document.getElementsByClassName("time")[0].innerHTML 

にアクセスするために、配列表記を使用する必要がありますカウンター(i)の

document.getElementsByClassName("time")[i].innerHTML 

これを機能させるためのすべての条件に上記を置き換えます。

関連する問題