每次您单击它时，我都试图突出显示标题标题或发布日期标题，但我做不到。我正在使用 Ruby 1.9.3 和 Rails 3.2.14
我以为这是我的 Controller 或 View 中的东西，但我不明白。它排序，但标题中未应用黄色突出显示。
这是我的 movies_controller 文件(只是相关部分):
class MoviesController < ApplicationController
...
def index
@movies = Movie.find(:all, :order => params[:sort_by])
if params[:sort_by] == 'title'
@title_header = 'hilite'
elsif params[:sort_by] == 'release_date'
@release_header ='hilite'
end
end
...
我的 View 文件(是 HAML):
-# This file is app/views/movies/index.html.haml
%h1 All Movies
%table#movies
%thead
%tr
%th{:class=>@title_header, :id=> "title_header"}= link_to "Movie Title", movies_path(:sort_by => 'title')
%th Rating
%th{:class=>@release_header, :id=> "release_date_header"}= link_to "Release Date", movies_path(:sort_by => 'release_date')
%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
最后，我的 application.css:
html, body {
margin: 0;
padding: 0;
background: White;
color: DarkSlateGrey;
font-family: Tahoma, Verdana, sans-serif;
font-size: 10pt;
}
div#main {
margin: 0;
padding: 0 20px 20px;
}
a {
background: transparent;
color: maroon;
text-decoration: underline;
font-weight: bold;
}
h1 {
color: maroon;
font-size: 150%;
font-style: italic;
display: block;
width: 100%;
border-bottom: 1px solid DarkSlateGrey;
}
h1.title {
margin: 0 0 1em;
padding: 10px;
background-color: orange;
color: white;
border-bottom: 4px solid gold;
font-size: 2em;
font-style: normal;
}
table#movies {
margin: 10px;
border-collapse: collapse;
width: 100%;
border-bottom: 2px solid black;
}
table#movies th {
border: 2px solid white;
font-weight: bold;
background-color: wheat;
}
table#movies th.hilite {
background-color: yellow;
}
table#movies th, table#movies td {
padding: 4px;
text-align: left;
}
#notice #warning {
background: rosybrown;
margin: 1em 0;
padding: 4px;
}
form label {
display: block;
line-height: 25px;
font-weight: bold;
color: maroon;
}
更新:呈现后的 HTML 源代码:
<!DOCTYPE html>
<html>
<head>
<title>Rotten Potatoes!</title>
<link href="/assets/application.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="jJOoNtKNLzZb+w8ywbDStDxk5TbODkv8fUtgX1bEvFU=" name="csrf-token" />
</head>
<body>
<h1 class='title'>Rotten Potatoes!</h1>
<div id='main'>
<h1>All Movies</h1>
<table id='movies'>
<thead>
<tr>
<th id='title_header'><a href="/movies?sort_by=title">Movie Title</a></th>
<th>Rating</th>
<th id='release_date_header'><a href="/movies?sort_by=release_date">Release Date</a></th>
<th>More Info</th>
</tr>
</thead>
<tbody>
<tr>
<td>Star Wars</td>
<td>PG</td>
<td>1977-05-02 00:00:00 UTC</td>
<td><a href="/movies/1">More about Star Wars</a></td>
</tr>
<tr>
<td>Aladdin</td>
<td>G</td>
<td>1992-11-25 00:00:00 UTC</td>
<td><a href="/movies/2">More about Aladdin</a></td>
</tr>
<tr>
<td>The Terminator</td>
<td>R</td>
<td>1984-10-26 00:00:00 UTC</td>
<td><a href="/movies/3">More about The Terminator</a></td>
</tr>
<tr>
<td>When Harry Met Sally</td>
<td>R</td>
<td>1989-07-21 00:00:00 UTC</td>
<td><a href="/movies/4">More about When Harry Met Sally</a></td>
</tr>
<tr>
<td>The Help</td>
<td>PG-13</td>
<td>2011-08-10 00:00:00 UTC</td>
<td><a href="/movies/5">More about The Help</a></td>
</tr>
<tr>
<td>Chocolat</td>
<td>PG-13</td>
<td>2001-01-05 00:00:00 UTC</td>
<td><a href="/movies/6">More about Chocolat</a></td>
</tr>
<tr>
<td>Amelie</td>
<td>R</td>
<td>2001-04-25 00:00:00 UTC</td>
<td><a href="/movies/7">More about Amelie</a></td>
</tr>
<tr>
<td>2001: A Space Odyssey</td>
<td>G</td>
<td>1968-04-06 00:00:00 UTC</td>
<td><a href="/movies/8">More about 2001: A Space Odyssey</a></td>
</tr>
<tr>
<td>The Incredibles</td>
<td>PG</td>
<td>2004-11-05 00:00:00 UTC</td>
<td><a href="/movies/9">More about The Incredibles</a></td>
</tr>
<tr>
<td>Raiders of the Lost Ark</td>
<td>PG</td>
<td>1981-06-12 00:00:00 UTC</td>
<td><a href="/movies/10">More about Raiders of the Lost Ark</a></td>
</tr>
<tr>
<td>Chicken Run</td>
<td>G</td>
<td>2000-06-21 00:00:00 UTC</td>
<td><a href="/movies/11">More about Chicken Run</a></td>
</tr>
</tbody>
</table>
<a href="/movies/new">Add new movie</a>
</div>
</body>
</html>
最佳答案
如果你修改你的电影 Controller ，你的代码将工作，如下所示:
def index
@movies = Movie.all(:order => "title ASC, release_date ASC")
if params[:sort_by] == 'title'
@title_header = 'hilite'
elsif params[:sort_by] == 'release_date'
@release_header ='hilite'
end
end
关于css - 突出显示标题和发布标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19762249/