从 Rails 视图更改 Haml 表的 CSS 属性答案

【问题标题】：Changing CSS properties of a Haml table from Rails view从 Rails 视图更改 Haml 表的 CSS 属性
【发布时间】：2013-08-03 01:09:16
【问题描述】：

我想从视图中更改表头背景颜色，这样当我单击表头 URL 时，它的背景颜色会发生变化。

我在 Haml 中有这个恢复视图：

%table#movies
  %thead
   %tr
    %th= link_to "Movie Title", movie_path, :id => "title_header" -#this is the table header

这是我想在点击“电影标题”后应用到表头的 CSS 样式：

table#movies th {
  background-color: yellow;
}

我不知道如何将点击与表头背景颜色绑定。这个问题是从一个在线课程中得到的，它是一个家庭作业，我们不能使用 javascript

【问题讨论】：

标签： html css ruby-on-rails ruby haml

【解决方案1】：

这是我在一些 Git 存储库中找到的解决方案

需要一个辅助方法来检查 %th 是否是我需要应用样式的类

def helper_class(field)
 if(params[:sort].to_s == field)
   return 'hilite'
 else
   return nil
 end
end

在视图中的第 % 个标签中调用了上一个方法

%table#movies
  %thead
    %tr
      %th{:id => 'title_header', :class => helper_class('title') }= link_to "Movie Title", movies_path(:sort=>'title', :ratings =>params[:ratings]), :id => 'title_header'
      %th Rating
      %th{:id => 'release_date_header', :class => helper_class('release') }= link_to "Release Date", movies_path(:sort=>'release',:ratings =>params[:ratings]), :id => 'release_date_header'
      %th More Info
  %tbody
    - @movies.each do |movie|
      %tr
        %td= movie.title 
        %td= movie.rating
        %td= movie.release_date
        %td= link_to "More about #{movie.title}", movie_path(movie)

= link_to 'Add new movie', new_movie_path

使用此代码，具有 :class => hilite 类的表头将更改为我提出的问题的这种样式。

感谢大家帮助我，我是网络开发的新手。

【讨论】：

你在哪里添加了helper_class？当我尝试这个时，我得到 noMethodError"

【解决方案2】：

咖啡脚本：

$('#title_header').click( ()->
  $(this).toggleClass('active')
)

CSS：

#title_header.active {
  background-color: yellow;
}

确保您只有一个 #title_header - 否则，请将其更改为一个类。

更新
如果您不想像评论中所说的那样使用 javascript：

%table#movies
  %thead
   %tr
    %th= link_to "Movie Title", movie_path, :id => "title_header", onclick: "$(this).css('background-color', 'yellow')"

【讨论】：

谢谢，但我没有使用咖啡脚本，它是 Rails 的掌舵人。
@alejandrozuleta Haml 只是编写 HTML 的一种简短方式。 HTML 不支持用户点击行为（提交按钮除外）。您需要 JavaScript（或 CoffeeScript，一种编写 JavaScript 的简短方式）来支持它。
@RoryO'Kane 好的，感谢您让我明白，我从在线课程中学习了这个（和其他问题），其中一个注释是不要使用 javascript。
如果 CSS 有父选择器，那么我们可以有一个纯非 js 的解决方案：/

【解决方案3】：

您可以使用:visited 伪选择器。

#movies th a:visited {
  background-color: yellow;
}

上述样式适用于访问过的链接。但是请注意，样式应用于a，而不是th。

【讨论】：

【解决方案4】：

%th{:class => ("hilite" if params[:id]== "title_header")}= link_to 'Movie Title', movies_path(id: 'title_header')

【讨论】：

一些解释会有所帮助