用于加载数据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>
回答 2
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用户
发布于 2018-11-11 05:50:04
在不访问onclick="ready()"文件的情况下，我可以直接告诉您，您的单击处理程序针对的是所有的json元素，因此我将删除json属性。$(document).ready()是一个jQuery函数，它将在加载文档后执行代码。所以不应该在onclick属性中直接引用它。特别是因为您已经为a标记附加了一个事件侦听器。
下一个HTML的id应该是唯一的，目前所有的a标签都有相同的id。对于多个元素，应该使用一个类。
<li><a class="some-class" title="toobin">October<br>Jeffrey Toobin</a></li>我会使用更具体的选择器。也许可以给你的链接添加一个类。然后：
$(document).ready(function () {
//on click for <a> element
$(".aClass").click(function () {
var title = $(this).attr("title");
getJSON(title+".json");
});
});我假设您有许多JSON文件，每个标题都作为文件名？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53243597
复制相关文章
相似问题
腾讯云开发者
