Question

所以我是Javascript，CSS和HTML的新手，我正在开展一项雄心勃勃的雄心勃勃的项目。在这一点上，我们称之为一个美化的任务管理器。我已经设法通过书籍和在线资源来拼凑这些东西。现在我只是试图充实UI并试图让主要的html文件与.js文件对话，该文件与另一个.html文件和.json文件对话。我还没有对CSS感到困扰。我想我可以在我开始工作之后做到这一点。这是我认为相关的代码。

主HTML（usetime.html）：

<!DOCTYPE html>

<body>
    <header>
        <h1>UseTime</h1>
        <nav>
            <a href="jq-load.html">HOME</a>
            <a href="jq-load.html2">PROFILE</a>
            <a href="jq-load.html4">MANAGE TASKS</a>
            <a href="usetime.html">TIME TABLE</a>
        </nav>
    </header>
    <section id="content">
        <div id="container">
            <div class="third">
                <div id="event">
                    <a id="class1" href="class1.html"><img src="" alt="class1" /> Class 1 </a>
                    <a id="class2" href="class2.html"><img src="" alt="class2" /> Class 2 </a>
                    <a id="class3" href="class3.html"><img src="" alt="class3" /> Class 3 </a>
                </div>
            </div>
            <div class="third">
                <div id="sessions"> Select a Class from the left </div>
            </div>
            <div class="third">
                <div id="details"> Details </div>
            </div>
        </div>
        <!-- container -->
    </section>
    <!-- content -->

    <script src="js/jquery-3.2.1.slim.min.js"></script>
    <script src="js/example.js"></script>
</body>

和.js文件应该处理所有事情（example.js）：

$(function () { //when the DOM is ready
    var times; //declare global variable
    $.ajax({ //set up request
        beforeSend: function (xhr) { //before requesting data
            if (xhr.overrideMimeType) { //if supported
                xhr.overrideMimeType("applicaition/json"); // set MIME to prevent errors
            }

        }
    });
    //funciton that colleges data from the json file
    fucntion loadTimetable() { //decalre function
        $.getJSON('data/example.json') //try to collect json data
            .done(function (data) { //if succesful
                times = data; //store in variable

            }).fail(fuction() { //if a problem: show message
                $('#event').html('Sorry! we couldnt load your time table at the moment');
            });
    }

    loadTimetable(); //call the function

    //CLICK ON TEH EVENT TO LOAD A TIME TABLE
    $('#content').on('click', '#event a', funciton(e) { //user clicks on place
        e.preventDefault(); //prevent loading page
        var loc = this.id.toUpperCase(); //get value of id attr

        var newContent = "";
        for (var i = 0; i < times[loc].length; i++) { // loop through sessions
            newContent += '<li><span class = "time">' + times[loc][i].time + '</span>';
            newContent += < a href = "descriptions.html#';
            newContent += times[loc][i].title.replace(/ /g, '-') + '">';
            newContent += times[loc][i].title + '</a></li>';
        }

        $('#sessions').html('<ul>' + newContent + '</ul>'); // Display Time

        $('#event a.current').removeClass('current'); // update selected link
        $(this).addClass('current');

        $('#details').text('');

    });

    //CLICK ON A SESSION TO LEAD THE DESCRIPTION

    $('#content').on('click', '#sessions li a', funciton(e) { //click on session
        e.preventDefault(); // prevent loading
        var fragment = this.href //title is in href

        fragment = fragment.replace('#', ' #'); //Add Space before #
        $('#details').load(fragment); //to load info

        $('#sessions a.current').removeClass('current'); //update selected
    });

    //CLICK ON PRIMARY NAVIGATION
    $('nav a').on('click', function (e) { //click on nav
        e.preventDefault(); //prevent loading
        var url = this.href //get UR: to load

        $('nav a.current').removeClass('current');
        $(this).addClass('current');

        $('#container').remove(); //remove old
        $('#content').load(url + ' #container').hide().fadeIn('slow'); // add new

    });
});

此外还有一个example.json只有几行，我有jquery 3.2.1.slim在同一个＆＃39; usetime＆＃39;夹

我很难过，任何帮助都会受到超级赞赏。谢谢

编辑（我的问题并不是很清楚）：当我运行第一个usetime html代码（应该执行其他东西）时，我看到的只是来自usetime html的内容。我不确定是什么错误或如何解决这个问题。

Answer 1

您的大部分问题都是“功能”拼写错误造成的。我也发现了这个错误：

newContent += <a href = "descriptions.html#';

你错过了首发'，它应该是：

newContent += '<a href = "descriptions.html#';

纠正所有语法错误后，您的代码应该可以正常运行：

<强>的JavaScript

$(function() { //when the DOM is ready
  var times; //declare global variable
  $.ajax({ //set up request
    beforeSend: function(xhr) { //before requesting data
      if (xhr.overrideMimeType) { //if supported
        xhr.overrideMimeType("applicaition/json"); // set MIME to prevent errors
      }
    }
  });
  //funciton that colleges data from the json file
  function loadTimetable() { //decalre function
    $.getJSON('data/example.json') //try to collect json data
      .done(function(data) { //if succesful
        times = data; //store in variable
      }).fail(function() { //if a problem: show message
        $('#event').html('Sorry! we couldnt load your time table at the moment');
      });
  }
  loadTimetable(); //call the function

  //CLICK ON TEH EVENT TO LOAD A TIME TABLE
  $('#content').on('click', '#event a', function(e) { //user clicks on place
    e.preventDefault(); //prevent loading page
    var loc = this.id.toUpperCase(); //get value of id attr
    var newContent = "";
    for (var i = 0; i < times[loc].length; i++) { // loop through sessions
      newContent += '<li><span class = "time">' + times[loc][i].time + '</span>';
      newContent += '<a href = "descriptions.html#';
      newContent += times[loc][i].title.replace(/ /g, '-') + '">';
      newContent += times[loc][i].title + '</a></li>';
    }
    $('#sessions').html('<ul>' + newContent + '</ul>'); // Display Time
    $('#event a.current').removeClass('current'); // update selected link
    $(this).addClass('current');
    $('#details').text('');
  });

  //CLICK ON A SESSION TO LEAD THE DESCRIPTION
  $('#content').on('click', '#sessions li a', function(e) { //click on session
    e.preventDefault(); // prevent loading
    var fragment = this.href; //title is in href
    fragment = fragment.replace('#', ' #'); //Add Space before #
    $('#details').load(fragment); //to load info
    $('#sessions a.current').removeClass('current'); //update selected
  });

  //CLICK ON PRIMARY NAVIGATION
  $('nav a').on('click', function(e) { //click on nav
    e.preventDefault(); //prevent loading
    var url = this.href; //get UR: to load
    $('nav a.current').removeClass('current');
    $(this).addClass('current');
    $('#container').remove(); //remove old
    $('#content').load(url + ' #container').hide().fadeIn('slow'); // add new
  });
});

我不确定我是否正确地从.js脚本调用.html和.json文件

1 个答案: