Question

当我单击此网页中的导航选项卡时，我正在尝试检索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&rsquo;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>&copy; 2017, San Joaquin Valley Town Hall, Fresno, CA 93755</p>
   </footer>
</body>
</html>

Answer 1

我对您的代码做了一些小改动，只要您在服务器上有json个文件可用，它就可以工作。您在onclick = "ready()"上遇到了一些错误，如果您使用jQuery click函数，则不需要使用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&rsquo;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>&copy; 2017, San Joaquin Valley Town Hall, Fresno, CA 93755</p>
   </footer>
</body>
</html>

Answer 2

如果没有访问json文件的权限，我可以立即告诉您，点击处理程序的目标是所有<a>元素，因此我将删除onclick="ready()"属性。 $(document).ready()是一个jQuery函数，将在文档加载后执行代码。因此，不应在您的onclick属性中直接引用它。特别是因为您已经为标签添加了事件监听器。

下一个HTML ID应该是唯一的，当前您的所有标记都具有相同的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文件，并且每个标题都作为文件名？

用于加载数据JSON文件的JavaScript代码

2 个答案: