Question

好的，所以对于班级，我基本上必须创建一个CRUD应用程序。我必须有一个导航栏，该导航栏链接到使用server.js文件加载的不同“页面”。在该服务器上，我加载了一个JSON文件，其中包含两个数组，一个数组用于页面或部分，另一个数组用于用户。目标是在一个部分中输入有关用户的信息，单击按钮，然后该用户的信息将在另一部分中列出。您还需要能够随意删除每个用户，而且它们都是本地的。

我的问题是我具有此addUser函数，并且在此函数中有一个用于添加按钮的单击侦听器。现在，它应该被单击的唯一操作是抛出console.log，但是我无法使其正常工作。 addUser函数还具有可以正常运行的console.log，我相信我的问题是我不知道应该将addUser函数添加到代码中的哪个位置。为了安全起见，我将列出所有代码。首先是server.js：

 var SERVER = (function(){
    //variable to store data.users into
    var _userData = [];
    var _sectionData = [];

    //getting the data and putting it into the variables above
    var _loadData = function(){
        $.getJSON("./data/data.json", function(data){
             _userData = data.Users;
             _sectionData = data.Sections;

             //console.log(_sectionData);
        })
    }

    var _showData = function(){
        return _userData;
    }

    var _getSection = function(sectionYouWant){
        let sec = {};
        $.each(_sectionData, function(idx, section){
            if(section.sectionName == sectionYouWant){
                sec = section.sectionContent;
            }
        });
        return sec;
    }

    _loadData();

    return {
        loadData: _loadData,
        showData: _showData,
        getSection: _getSection
    }
})()

下一个是app.js

    function addUser(){
    console.log("firing addUser");

    $('#addButton').click(function(e){
        console.log("are you working????")
        e.preventDefault();
    })
}

function initNavListeners(){
    $("#home").click(function(e){
        //console.log('click home');
        var sectionData = SERVER.getSection('home');
        $('.wrapper').html(sectionData);
    });

    $("#view").click(function(){
        //console.log('click view users');
        var userData = SERVER.showData();
        var sectionData = SERVER.getSection('view');

        $(".wrapper").html(sectionData);

        function showUsers(){
            $.each(userData, function(idx, user){
                $(".wrapper").append(`
                <br/><p><b>Name:</b> ${user.fName} ${user.lName}</p>

                <p><b>Email Address:</b>
                ${user.email}</p>

                <p><b>Twitter Handle:</b>
                ${user.twitter}</p>

                <button class="delete" id=${idx}>DELETE</button><br/>`)
            })
        }

        showUsers();

    });

    $("#register").click(function(e){
        //console.log('click register');
        addUser();
        var sectionData = SERVER.getSection('register');
        $('.wrapper').html(sectionData);
    });
}

$(document).ready(function(){
    SERVER.loadData();
    initNavListeners();

    var sectionData = SERVER.getSection('home');
    $('.wrapper').html(sectionData);
})

最后是JSON：

    {
    "Users": [
        {
            "fName": "Andrea",
            "lName": "Trigg",
            "email": "at@users.com",
            "twitter": "@at"
        }
    ],
    "Sections": [
        {
            "sectionName": "home",
            "sectionContent": "<h1>HOME</h1><p>Welcome to the home page for my Homework 5 assignment! In this little application, you can register users and it will be submitted to a local JSON file. Then when you go to the view users page, it will show all the current users registered. You can also delete each individual user by pressing the \"delete user\" button below their information.</p><p>I hope this will work on your machine because it definitely works on mine!</p><p>I'm honestly not sure what else I should put here, so have a gif of a cute kitten trying to eat their own tail.</p><img src=\"https://i.pinimg.com/originals/84/c8/ba/84c8bab01787f2ee1ebef1378e9e8444.gif\"><p>I hope you have a great week! Thank you for taking a look at my Homework 5!</p>"
        },
        {
            "sectionName": "view",
            "sectionContent": "<h1>VIEW USERS</h1><p>Scroll below to see all users stored in the database. Click the delete button to delete a user from the database (careful, you won't get the information back if you delete!)</p>"
        },
        {
            "sectionName": "register",
            "sectionContent": "<h1>REGISTER</h1><p>Register a new user by using the form below!</p><form><input id=\"first\" type=\"text\" value=\"\" placeholder=\"First Name:\"><br/><input id=\"last\" type=\"text\" value=\"\" placeholder=\"Last Name:\"><br/><input id=\"emailAddress\" type=\"text\" value=\"\" placeholder=\"Email:\"><br/><input id=\"twitterHandle\" type=\"text\" value=\"\" placeholder=\"Twitter Handle\"><br/><input id=\"addButton\" type=\"button\" value=\"SUBMIT\"></form>"
        }
    ]
}

如果您发现在功能本身处于运行状态时可能导致我的点击侦听器无法正常运行的任何功能，那将是巨大的帮助。我真的为此感到挣扎，所以任何帮助都会很棒！谢谢！

Answer 1

哇，好了，经过三个小时的研究，我终于明白了。

因此，基本上，您使用addUser函数，而不是将其设置为全局函数，而是将其放入initNavListener中的#register Click侦听器中。它应该看起来像这样：

$("#register").click(function(e){
        //initListeners();
        //console.log('click register');
        var userData = SERVER.showData();
        var sectionData = SERVER.getSection('register');
        $('.wrapper').html(sectionData);

        function addUser(){
            console.log("firing addUser");

            $('#addButton').click(function(e){
                console.log("are you working????")
                e.preventDefault(); )}

我感觉现在是最大的白痴：'D

ETA：如果有人想帮助我找出如何删除这些用户的方法，这很酷，但是未将其列为我需要做的事情，因此，我不会重点强调atm。

该函数在我的代码中放在哪里？ jQuery的

1 个答案: