javascript/rails：将一组 <a href> 变成一个 class="inactive"

Question

tl;dr 我想获取datetimes 的数组并使用javascript（以及任何必要的erb 标签），将所有<a href>s 与其中一个datetimes在网址中是一个<a class="inactive">。

这是我在 SO 上提出的第一个问题，请多多包涵。

我有 2 个 javascript 对象，其中包含一组链接或 <a href>s 到日历中的天数。一个是 slick.js 轮播，显示从 4 月 5 日到 7 月 12 日的一周中的几天。另一个是 jquery ui datepicker。它们本质上都包含指向localhost:3000/games?date=date 的相同链接集，其中日期的格式为例如20150405。每个链接都显示了在该日期进行的棒球比赛的列表。

但是，我想让所有<a href> 天没有玩任何游戏都拥有非活动课程或<a class="inactive">。

这是一个 Rails 应用程序，但我的想法是我需要使用 javascript 来正确完成此操作，但在必要时使用 erb 标签。

我想我可以开始在我的 games_controller 中创建一个包含 0 个游戏的所有日期的数组？但是我怎样才能让所有<a href>s 和?date='date_with_no_games' 都拥有<a class="inactive">？

另一个问题是光滑的轮播按索引排列。所以本质上，start_date = ?20150405（4 月 5 日）=data-slick-index="0"。例如，为了让我确定initialSlide 应该是哪个索引，我这样做：data-slick='{"initialSlide": <%= (game_date.beginning_of_week - @start_date).to_i %>}'。这样，轮播总是从我正在查看的那一周的星期一开始（而我所在的那一天在该轮播中以红色标记）。我不知道这个皱纹是否会影响这个问题的答案，但我想把它包括在内以防万一。

好的，现在让一些代码提供更多上下文。

这是每个 js 对象（轮播和日期选择器）的 js：

// Carousel
$(document).ready(function(){
  $('.carousel-week').slick({
  });
});

// Datepicker
$.datepicker._updateDatepicker_original = $.datepicker._updateDatepicker;
  $.datepicker._updateDatepicker = function(inst) {
      $.datepicker._updateDatepicker_original(inst);
      var afterShow = this._get(inst, 'afterShow');
      if (afterShow)
          afterShow.apply((inst.input ? inst.input[0] : null));  // trigger custom callback
  }

  $( "#datepicker" ).datepicker({
    showOn: "both",
    buttonText: "<i class='fa fa-lg fa-calendar text-danger'></i>",
    afterShow :function(){
     var $dp=$("#ui-datepicker-div");

      $dp.find('.ui-state-default').each(function(){
            var $td=$(this).parents('td');
            var month=parseInt($td.attr('data-month'));                
            month++;
            var year=$td.attr('data-year')
            var day=parseInt($(this).text());
            if(month<10) month='0'+month;
            if(day<10) day='0'+day;
            var date=year+month+day;
          $(this).attr('href','<%= request.base_url + '/games' %>?date='+date);
      }).click(function(){
              window.location=$(this).attr('href');
      });     
    },
  });

这是轮播的 erb 部分（日期选择器是一条微不足道的行，不相关）：

<div class="carousel-week col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-4 col-xs-6 col-xs-offset-3" data-slick='{"slidesToShow": 7, "slidesToScroll": 7, "initialSlide": <%= (game_date.beginning_of_week - @start_date).to_i %>}'>
    <% @schedule.each do |date| %>
      <div><%= link_to games_path(date: date.strftime("%Y%m%d")), class: (date == game_date ? "red" : "") do %>
        <%= date.strftime("%a") %> <span><%= date.strftime("%-d") %></span>
      <% end %></div>
    <% end %>
</div>

还有我的games_controller，如果你也需要的话：

class GamesController < ApplicationController

  def index
    @games = Game.where(game_date: game_date.to_date)
    distinct_dates = Game.reorder("game_date").select("game_date").distinct
    @start_date = distinct_dates.first.game_date.to_date
    end_date = distinct_dates.last.game_date.to_date
    @schedule = @start_date..end_date
  end

  def game_date
    if params[:date].present?
      date = Date.strptime(params[:date], "%Y%m%d")
    else
      date = (Time.zone.now - 9.hours).to_date
    end
  end

  helper_method :game_date

end

非常感谢！ （我是初学者，对于丑陋的代码和冗长的问题非常抱歉！）

Answer 1

如果有人需要解决这样的问题，这对我有用：

为了让没有游戏处于非活动状态的日期选择器日子，我在 javascript 中做到了：

var availableDate = <%= @distinct_dates.collect { |c| c.strftime('%Y%m%d') }.to_json.html_safe %>
$.datepicker._updateDatepicker_original = $.datepicker._updateDatepicker;
  $.datepicker._updateDatepicker = function(inst) {
      $.datepicker._updateDatepicker_original(inst);
      var afterShow = this._get(inst, 'afterShow');
      if (afterShow)
          afterShow.apply((inst.input ? inst.input[0] : null));  // trigger custom callback
  }

  $( "#datepicker" ).datepicker({
    defaultDate: new Date(<%= game_date.to_time.to_i * 1000 %>),
    showOn: "both",
    buttonText: "<i class='fa fa-lg fa-calendar text-danger'></i>",
    afterShow :function(){
     var $dp=$("#ui-datepicker-div");

      $dp.find('.ui-state-default').each(function(){
            var $td=$(this).parents('td');
            var month=parseInt($td.attr('data-month'));                
            month++;
            var year=$td.attr('data-year')
            var day=parseInt($(this).text());
            if(month<10) month='0'+month;
            if(day<10) day='0'+day;
            var date=year+month+day;
            if ($.inArray(date, availableDate) >= 0){
              $(this).attr('href','<%= request.base_url + '/games' %>?date='+date);
            } else {
              $(this).removeClass('ui-state-default').addClass('ui-state-disabled');
            }
      }).click(function(){
        var href = $(this).attr('href');
        if (href == '#') {
          return false
        } else {
            window.location=href;
        }
      });     
    },
  });

然后为了让没有游戏的轮播日期处于非活动状态，我使用了 helper_method：

module GamesHelper
  def class_for_game_link(date, dates_with_games)
    class_name = []
    class_name << 'inactive' unless dates_with_games.include?(date)
    class_name << 'red' if date == game_date
    class_name.join(' ')
  end
end

那么这是我在 erb 中的轮播：

<div class="carousel-week col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-4 col-xs-6 col-xs-offset-3" data-slick='{"slidesToShow": 7, "slidesToScroll": 7, "initialSlide": <%= (game_date.beginning_of_week - @start_date).to_i %>}'>
    <% @schedule.each do |date| %>
      <div>
        <% if @distinct_dates.include?(date) %>
          <%= link_to games_index_path(date: date.strftime("%Y%m%d")), class: class_for_game_link(date, @distinct_dates) do %>
            <%= date.strftime("%a") %> <span><%= date.strftime("%-d") %></span>
          <% end %>
        <% else %>
          <%= date.strftime("%a") %> <span><%= date.strftime("%-d") %></span>
        <% end %>
      </div>
    <% end %>
  </div>