使用JS变量更改特定 <div> 多页上的内容（JQuery Mobile）（第二次单击按钮不执行任何操作）

Question

我试图仅更改网页的“主要/内容”部分，而使页眉，导航栏和页脚为“静态”，因为它们对于每个页面都是通用的。

第一次单击导航按钮时，此方法就很好。 但是第二个不响应（尽管$ currentPage中的更改在打印到控制台时会反映出来）。 在无数次点击之后，将进行一次div内容更改，但没有一个对应于最后一次单击的按钮。

我真的希望我能对此有所帮助，因为它看起来应该很可行。

这是我的索引：

  <!DOCTYPE html>
  <head>
     <title>NoteVote</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
     <link rel="stylesheet" href="./NV_home.css">
     <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
     <script src="./scripts/navScript.js"></script>
     <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
  </head>
  <body>

  <!-- COURSES page -->
  <div data-role="page" id="noteVote">
     <div data-role="header" align="middle" class="header">
        <img src="images/banner_post_it.png" align="middle" alt="Banner Image" height="100" width="250"/>
        <!-- This is the Navbar -->
        <div data-role="navbar" data-grid="c" id="navBar">
           <ul>
              <li><a class="ui-btn" id="coursesButton">Courses</a></li>
              <li><a class="ui-btn" id="searchButton">Search</a></li>
              <li><a class="ui-btn" id="submitButton">Submit</a></li>
              <li><a class="ui-btn" id="accountButton">Account</a></li>
           </ul>
        </div>
     </div>

     <!-- This is the MAIN section -->
     <div data-role="content" class="ui-content" id="coursesContent">
           <h1>Courses</h1>
     </div>

     <!-- FOOTER -->
     <div data-role="footer" class="footer">
        You are not logged in!
     </div>
  </div>
  <!-- /COURSES -->

  <!-- SEARCH -->
  <div data-role="page" id="search">

     <!-- This is the MAIN section -->
     <div data-role="content" class="ui-content" id="searchContent">
        <h1>Search Section</h1>
     </div>

  </div> <!-- /search -->

  <!-- SUBMIT -->
  <div data-role="page" id="submit">

     <div data-role="content" class="ui-content" id="submitContent">
        <h1>Submiiiiit</h1>
     </div>

  </div> <!-- /submit -->

  <!-- ACCOUNT -->
  <div data-role="page" id="account">

     <div data-role="content" class="ui-content" id="accountContent">
        <h1>Accoooount</h1>
     </div>

  </div>
  <!-- /Account -->
  </body>
  </html>

我的剧本：

  $(document).ready(function()
  {
     $currentPage = "#coursesContent";   // Holds the current page.

     // Function for Courses button
     $(document).on("click","#coursesButton",function(e)
     {
        e.preventDefault();

        $($currentPage).html($('#coursesContent').html());

        $currentPage = "#coursesContent";
        console.log($currentPage);
     });

     // Function for the Search Button in nav bar.
     $(document).on("click","#searchButton",function(e)
     {
       e.preventDefault();

       $($currentPage).html($('#searchContent').html());

       //Sets  current page to Search Content (search page)
       $currentPage = "#searchContent";

       console.log($currentPage);
     });

     // Function for Submit button.
     $(document).on("click","#submitButton",function(e)
     {
        e.preventDefault();

        $($currentPage).html($('#submitContent').html());

        $currentPage = "#submitContent";

        console.log($currentPage);
     });

     // Function for Account button
     $(document).on("click","#accountButton",function(e)
     {
        e.preventDefault();

        $($currentPage).html($('#accountContent').html());

        $currentPage = "#accountContent";
        console.log($currentPage);
     });

  });

有什么方法可以调用脚本以在每次单击按钮时重新加载？ 似乎变量正在更改，但是没有刷新内容。

非常感谢任何帮助。

另外，非常欢迎关于实现此目标的其他方法的任何建议。

干杯!

Answer 1

我经常使用的一个简单的一页导航脚本如下所示：

$(document).ready(function() {
    $("#coursesButton").on("click", function(e) {
        e.preventDefault();
        $("#mainContent").load("/snippets/courses.html");
    }

    $("#accountButton").on("click", function(e) {
    //... etc.
}

与菜单项一样，使用尽可能多的这些块。

基本上，重复/snippets/courses.html ，然后将/snippets/courses.html更改为/snippets/account.html等。将您的额外HTML文件保留在snippets文件夹中（或者您希望对其进行排列）。

该常量是ID为#mainContent的<div> 。 这样，您只需要交换主要DIV的内容，而不必在不使用其他元素时将它们保留在文档中。

使用$(this)并将代码段文件名匹配到按钮的ID可能是一种更优雅的方法，但是上述方法应该比现在正在执行的方式更容易理解。

使用JS变量更改特定 <div> 多页上的内容（JQuery Mobile）（第二次单击按钮不执行任何操作）

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-05-06 16:50:19

使用JS变量更改特定 <div> 多页上的内容（JQuery Mobile）（第二次单击按钮不执行任何操作）

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-05-06 16:50:19

解决方案1
1 已采纳 2014-05-06 16:50:19