Я пытаюсь получить файлы 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>🤔 А знаете ли вы, что...
JavaScript позволяет создавать динамические и интерактивные веб-приложения.
Я внес небольшие изменения в ваш код, и он должен работать, если на сервере есть файлы 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>Не имея доступа к файлам json, я могу сразу сказать вам, что ваш обработчик кликов нацелен на все элементы <a>, поэтому я бы удалил атрибуты onclick = "ready()". $(document).ready() - это функция jQuery, которая выполняет код после загрузки документа. Поэтому на него не следует ссылаться непосредственно в вашем свойстве onclick. Тем более, что вы уже прикрепили прослушиватель событий для своих тегов.
Следующий HTML-идентификатор должен быть уникальным, в настоящее время все ваши теги a имеют одинаковый идентификатор. Для нескольких элементов следует использовать класс.
<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, которые вы извлекаете с каждым заголовком в качестве имени файла?