以下是我已将文件news.js链接起来的HTML文件
我写的点击方法不起作用。
<!doctype html>
<html>
<title>NEWS</title>
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="articles container">
<div class="article current">
<div class="item row">
<div class="col-xs-3">
<p class="source">FLIGHT</p>
</div>
<div class="col-xs-6">
<p class="title">Embraer adds third Legacy 500 prototype to flight test campaign</p>
</div>
<div class="col-xs-3">
<p class="pubdate">Mar 23</p>
</div>
</div>
<div class="description row">
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<h1>Embraer adds third Legacy 500 prototype to flight test campaign</h1>
<p>The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...</p>
</div>
<div class="col-xs-3"> </div>
</div>
</div>
<div class="article">
<div class="item row">
<div class="col-xs-3">
<p class="source">AW Commercial Aviation</p>
</div>
<div class="col-xs-6">
<p class="title">CSeries Supplier Scramble</p>
</div>
<div class="col-xs-3">
<p class="pubdate">Mar 22</p>
</div>
</div>
<div class="description row">
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<h1>CSeries Supplier Scramble</h1>
<p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p>
</div>
<div class="col-xs-3"> </div>
</div>
</div>
<div class="article">
<div class="item row">
<div class="col-xs-3">
<p class="source">AW business aviation</p>
</div>
<div class="col-xs-6">
<p class="title">Flying the Gulfstream G650</p>
</div>
<div class="col-xs-3">
<p class="pubdate">Mar 22</p>
</div>
</div>
<div class="description row">
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<h1>Flying the Gulfstream G650</h1>
<p>Gulfstream is turning up the heat in the large-cabin business aircraft competition with its new G650 flagship, the largest, fastest, farthest-ranging...</p>
</div>
<div class="col-xs-3"> </div>
</div>
</div>
<div class="article">
<div class="item row">
<div class="col-xs-3">
<p class="source">FLIGHT</p>
</div>
<div class="col-xs-6">
<p class="title">New retirements cut RAF VC10 fleet to four</p>
</div>
<div class="col-xs-3">
<p class="pubdate">Mar 22</p>
</div>
</div>
<div class="description row">
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<h1>New retirements cut RAF VC10 fleet to four</h1>
<p>The UK Royal Air Force has retired another two of its Vickers VC10 tankers, with the pair's departure reducing its inventory of the Rolls-Royce...</p>
</div>
<div class="col-xs-3"> </div>
</div>
</div>
<div class="article">
<div class="item row">
<div class="col-xs-3">
<p class="source">FLIGHT</p>
</div>
<div class="col-xs-6">
<p class="title">Virgin can deliver more value for Delta than for SIA: Bastian</p>
</div>
<div class="col-xs-3">
<p class="pubdate">Jul 17</p>
</div>
</div>
<div class="description row">
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<h1>Virgin can deliver more value for Delta than for SIA: Bastian</h1>
<p>Delta Air Lines president Ed Bastian is confident that the carrier can extract far more value from its shareholding in Virgin Atlantic compared with...</p>
</div>
<div class="col-xs-3"> </div>
</div>
</div>
<div class="article">
<div class="item row">
<div class="col-xs-3">
<p class="source">AW Defense</p>
</div>
<div class="col-xs-6">
<p class="title">Freedom Experiences Two More Power Outages</p>
</div>
<div class="col-xs-3">
<p class="pubdate">Mar 22</p>
</div>
</div>
<div class="description row">
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<h1>Freedom Experiences Two More Power Outages</h1>
<p>The Littoral Combat Ship (LCS-1) USS Freedom’s first overseas deployment to Southeast Asia has been marred by two more power outages...</p>
</div>
<div class="col-xs-3"> </div>
</div>
</div>
<div class="article">
<div class="item row">
<div class="col-xs-3">
<p class="source">FLIGHT</p>
</div>
<div class="col-xs-6">
<p class="title">FedEx to acquire up to 30 United 757s</p>
</div>
<div class="col-xs-3">
<p class="pubdate">Mar 22</p>
</div>
</div>
<div class="description row">
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<h1>FedEx to acquire up to 30 United 757s</h1>
<p>United Airlines is to sell up to 30 Boeing 757s to freight operator FedEx Express, with deliveries of the twinjets set to start this year.</p>
</div>
<div class="col-xs-3"> </div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"
type="text/javascript"></script>
<script src="news.js"></script>
</body>
</html>
news.js文件
var main = function() {
$('.article').click(function() {
$('.article').removeClass('current');
$('.description').hide();
$(this).addClass('.current);
$(this).children('.description').show();
$(document).keypress(function(event){
if(event.which === 111);{
$('.current).children('.description').toggle();
}
});
});
}
$(document).ready(main);
答案 0 :(得分：0)
有一些问题，首先main是一个函数，所以在它之后添加括号。你的js缺少引号：
这里................................... v（你也不需要添加课程的时期）
$(this).addClass('.current);
这里...... v
$('.current).children('.description').toggle();
答案 1 :(得分：0)
如果我理解得很好，这可能会对你有所帮助：
function fn(arr, toReplace, newValue) {
for(var x in arr) {
for(var k in toReplace) {
if(arr[x][k] == toReplace[k]) {
arr[x] = newValue;
}
}
}
return arr;
};
var arr = [{ id: 1, name: "foo"}, { id: 2, name: "bar" }];
var newValue = {id: 2, name: "boop"};
arr = fn(arr, {id: 2}, newValue);
console.log(arr);
和css：
/*global alert,jQuery*/
(function ($, window, document) {
'use strict';
$(function () {
var $articles = $("div.article");
$articles.on('click', function () {
var $me = $(this);
if (!$me.hasClass('current')) {
$('div.article.current').removeClass('current');
$me.addClass('current');
}
});
});
}(jQuery, window, document));
无需使用javascript切换div.description元素的可见性。