javascript/rails：转动一组 <一个 href>s 以获得一个类= "inactive"

Question

tl;dr我想采用datetime s数组并使用javascript(和任何必要的动词标签)，在url和<a class="inactive">中使用其中一个datetime s给予所有<a href> s。

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

我有2个javascript对象，其中包含一堆链接或<a href> s到日历中的天。一个是光滑的.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 &datepicker):

// 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');
      });     
    },
  });

这是carousel的动词部分(日期选择器是一个微不足道的行，不相关):

<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

然后这是我的旋转木马在动词:

<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>