用于加载数据JSON文件的JavaScript代码
用于加载数据JSON文件的JavaScript代码
提问于 2018-11-11 05:30:25
单击此网页中的导航选项卡时，我正在尝试检索JSON文件。当我将鼠标悬停在文本上时，文本将变为斜体，但我无法单击选项卡来检索JSON信息。为了确保导航栏上的选项卡是可单击的，我需要更改代码中的哪些内容？
$(document).ready(function () {
//on click for <a> element
$("a").click(function () {
var title = $(this).attr("title");
getJSON(title+".json");
});
}); // end ready
function getJSON(jsonFileURL) {
$.ajax({
url: jsonFileURL,
//handle as text
dataType: "text",
success: function (data) {
//data downloaded + pass data
var json = $.parseJSON(data);
// display results
$("main > h2").html(json.speakers[0].month + "<br/>" + json.speakers[0].speaker);
$("main > h1").html(json.speakers[0].title);
$("main > img").attr("src", json.speakers[0].image);
$("main > p").html(json.speakers[0].text);
}
});
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Load Speaker Files</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="speaker.js"></script>
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<img src="images/town_hall_logo.gif" alt="Town Hall logo" height="80">
<h1><a id="top">San Joaquin Valley Town Hall</a></h1>
<h2>Celebrating our <span class="shadow">75<sup>th</sup></span> Year</h2>
</header>
<main>
<h1>The Supreme Nine: Black Robed Secrets</h1>
<img src="images/toobin_court.jpg">
<h2>October<br>Jeffrey Toobin</h2>
<p>Author of the critically acclaimed best seller, The Nine: Inside the
Secret World of the Supreme Court, Jeffrey Toobin brings the inside
story of one of America's most mysterious and powerful institutions to
the Saroyan stage. At the podium, Toobin is an unbiased, deeply analytic
expert on American law, politics and procedure and he provides a unique
look into the inner workings of the Supreme Court and its influence.
</p>
</main>
<aside>
<h1 id="speakers">This Year’s Speakers</h1>
<nav id="nav_list">
<ul>
<li><a id="speakers" onclick = "ready()" title="toobin">October<br>Jeffrey Toobin</a></li>
<li><a id="speakers" onclick = "ready()" title="sorkin">November<br>Andrew Ross Sorkin</a id="myAnchor" onclick = "ready()"a></li>
<li><a id="speakers" onclick = "ready()" title="chua">January<br>Amy Chua</a></li>
<li><a id="speakers" onclick = "ready()" title="sampson">February<br>Scott Sampson</a></li>
</ul>
</nav>
</aside>
<footer>
<p>© 2017, San Joaquin Valley Town Hall, Fresno, CA 93755</p>
</footer>
</body>
</html>
Stack Overflow用户
发布于 2018-11-11 05:38:26
我对您的代码做了一些小的修改，只要您在服务器上有可用的json文件，它就应该可以工作。你在onclick = "ready()"上有一些错误，如果你使用jQuery点击函数，你不需要使用onlick属性。
$(document).ready(function () {
//on click for <a> element
$("a").click(function () {
var title = $(this).attr("title");
getJSON(title+".json");
});
}); // end ready
function getJSON(jsonFileURL) {
alert(jsonFileURL);
$.ajax({
url: jsonFileURL,
//handle as text
dataType: "text",
success: function (data) {
//data downloaded + pass data
var json = $.parseJSON(data);
// display results
$("main > h2").html(json.speakers[0].month + "<br/>" + json.speakers[0].speaker);
$("main > h1").html(json.speakers[0].title);
$("main > img").attr("src", json.speakers[0].image);
$("main > p").html(json.speakers[0].text);
}
});
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Load Speaker Files</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="speaker.js"></script>
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<img src="images/town_hall_logo.gif" alt="Town Hall logo" height="80">
<h1><a id="top">San Joaquin Valley Town Hall</a></h1>
<h2>Celebrating our <span class="shadow">75<sup>th</sup></span> Year</h2>
</header>
<main>
<h1>The Supreme Nine: Black Robed Secrets</h1>
<img src="images/toobin_court.jpg">
<h2>October<br>Jeffrey Toobin</h2>
<p>Author of the critically acclaimed best seller, The Nine: Inside the
Secret World of the Supreme Court, Jeffrey Toobin brings the inside
story of one of America's most mysterious and powerful institutions to
the Saroyan stage. At the podium, Toobin is an unbiased, deeply analytic
expert on American law, politics and procedure and he provides a unique
look into the inner workings of the Supreme Court and its influence.
</p>
</main>
<aside>
<h1 id="speakers">This Year’s Speakers</h1>
<nav id="nav_list">
<ul>
<li><a id="speakers" title="toobin">October<br>Jeffrey Toobin</a></li>
<li><a id="speakers" title="sorkin">November<br>Andrew Ross Sorkin</a></li>
<li><a id="speakers" title="chua">January<br>Amy Chua</a></li>
<li><a id="speakers" title="sampson">February<br>Scott Sampson</a></li>
</ul>
</nav>
</aside>
<footer>
<p>© 2017, San Joaquin Valley Town Hall, Fresno, CA 93755</p>
</footer>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53243597
复制相关文章
相似问题
腾讯云开发者
