javascript/rails：转一组<a href>得到一个class="inactive"

Question

tl;dr 我想获取一个 datetime 数组并使用 javascript（以及任何必要的 erb 标签），给出所有 <a href>s 与 url 和 <a class="inactive">.

中的 datetimes 之一

这是我在 SO 上提出的第一个问题，所以请耐心等待。

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

但是，我想让所有 <a href> 天都没有玩游戏，所以 class 或 <a class="inactive">.

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

我想我可以开始在我的 games_controller 中创建一个包含 0 场比赛的所有日期的数组？但是 我怎么才能让所有 ?date='date_with_no_games' 的 <a href> 都变成 <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>

javascript/rails：转一组<a href>得到一个class="inactive"

javascript/rails: Turn a set of <a href>s to have a class="inactive"

javascript

jquery

jquery-ui-datepicker

ruby-on-rails-4

slick.js