Javascript仅适用于列表中的一个项目

Question

我的脚本从现在开始计算到due_date。我做了一个.each列出reservations。每个reservation都有一个due_date。我做的计数器仅适用于第一行..并且似乎不适用于剩余的行。

• 我也注意到当我添加新记录时，新记录添加/替换为另一个。因为当我添加/删除记录时，我的计时器会发生显着变化。

以下是代码：

    <% @reservations.where( "completed = ?", false).where( "due_date >= ?", DateTime.now).each do |reservation| %>
    
      <div id="dueDate-counter">
        <table>
          <tr>
            <td>days</td>
            <td>hrs</td>
            <td>mns</td>
            <td>secs</td>
          </tr>
          <tr>
            <td id="days"></td>
            <td id="hours"></td>
            <td id="minutes"></td>
            <td id="seconds"></td>
          </tr>
    
        </table>
    
        <script type="text/javascript">
          function countdown() {
            var now = new Date( <% DateTime.now %> );
            // var year = <%= reservation.due_date.strftime("%Y")%>;
            // var month = <%= reservation.due_date.strftime("%m") %>;
            // var day = <%= reservation.due_date.strftime("%d") %>;
            // var time = <%= reservation.due_date.strftime("%r") %>;
    
    
    
            // var eventDate = new Date(year, month, day, time);
            var eventDate = new Date("<%= reservation.due_date.localtime.strftime(" % m / % d / % Y % l: % M % P ") %>"); 

<%= puts "this is the reservation format below!!!!!!!" %>

<%= puts "#{reservation.due_date.localtime.strftime(" % m / % d / % Y % l: % M % P ")}" %>
              console.log(now);
            var currentTime = now.getTime();
            var eventTime = eventDate.getTime();
            console.log(currentTime);
            var remTime = eventTime - currentTime;
    
            var s = Math.floor(remTime / 1000);
            var m = Math.floor(s / 60);
            var h = Math.floor(m / 60);
            var d = Math.floor(h / 24);
    
            h %= 24;
            m %= 60;
            s %= 60;
    
            h = (h < 10) ? "0" + h : h;
            m = (m < 10) ? "0" + m : m;
            s = (s < 10) ? "0" + s : s;
    
    
    
            document.getElementById("days").textContent = d;
            document.getElementById("days").innerText = d;
    
    
            document.getElementById("hours").textContent = h;
    
            document.getElementById("minutes").textContent = m;
    
            document.getElementById("seconds").textContent = s;
    
    
            setTimeout(countdown, 1000);
          };
    
          countdown();
        </script>
    
      </div>
      
      
      <% end %>

Answer 1

而不是id使用class

document.getElementsByClassName("example");

Answer 2

HTML中的标识符必须是唯一的。 getElementById()将始终获取第一个元素，因此代码适用于第一行。

您可以使用特定的CSS类，然后可以使用Class Selector来定位元素。 $.fn.find()可用于定位父元素上下文中的TD元素。

在下面的代码段中，使用data-*自定义属性将任意数据与元素相关联，可以使用$.fn.data()

获取

function countdown(elem) {
    var now = new Date(elem.data('now'));
    var eventDate = new Date(elem.data('date'));
    var currentTime = now.getTime();
    var eventTime = eventDate.getTime();
    console.log(currentTime);
    var remTime = eventTime - currentTime;
    var s = Math.floor(remTime / 1000);
    var m = Math.floor(s / 60);
    var h = Math.floor(m / 60);
    var d = Math.floor(h / 24);
    h %= 24;
    m %= 60;
    s %= 60;
    h = (h < 10) ? "0" + h : h;
    m = (m < 10) ? "0" + m : m;
    s = (s < 10) ? "0" + s : s;

    elem.find(".days").text(d); 
    elem.find(".hours").text(h);
    elem.find(".minutes").text(m);
    elem.find(".seconds").text(s);
    setTimeout(function(){
        countdown(elem);
    }, 1000);
};

$('.dueDate-counter').each(function(){
    countdown($(this))
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<% @reservations.where( "completed = ?", false).where( "due_date >= ?", DateTime.now).each do |reservation| %>
  <div class="dueDate-counter" data-now='<% DateTime.now %>' data-date='<%= reservation.due_date.localtime.strftime(" % m / % d / % Y % l: % M % P ") %>'>
    <table>
      <tr>
        <td>days</td>
        <td>hrs</td>
        <td>mns</td>
        <td>secs</td>
      </tr>
      <tr>
        <td class="days"></td>
        <td class="hours"></td>
        <td class="minutes"></td>
        <td class="seconds"></td>
      </tr>
    </table>
  </div>
  <% end %>