Question

我有一些来自API的数据，并且从该API向合适的用户插入了帖子。我也想通过再次单击隐藏此数据，并且仅下载一次（现在每次单击都将下载下载到每个用户）。我试图通过标志和if / else指令来做到这一点，但我失败了。最简单的解决方法是什么？我只想使用纯JavaScript。

 const template = document.querySelector('#template');
const usersList = document.querySelector('#usersList');


fetch("https://jsonplaceholder.typicode.com/users")
    .then(resp =>
        resp.json()
    )
    .then(resp => {
        console.log(resp)
        resp.forEach(user => {
            // Clone template content
            const clone = document.importNode(template.content, true);
            // Find element with class "user-name" in template content
            const userName = clone.querySelector('.user-name');
            // Insert name of each user in API to h2
            userName.innerHTML = user.name;
            // Find element with class "user-cnt" in template content
            const article = clone.querySelector('.user-cnt');
            // Set data-id from API
            article.dataset.id = `${user.id}`;
            // Find element with class "address" in template content
            const address = clone.querySelector('.address');
            // Insert phone and email of each user in API to div with class "address"
            address.innerHTML = `Phone: ${user.phone}<br>
            email: <a href="mailto: ${user.email}">${user.email}</a>`;

            const ulList = clone.querySelector(".user-posts");

            // Show posts
            const btn = clone.querySelector('.btn');

            btn.addEventListener('click', () => {
                fetch(`https://jsonplaceholder.typicode.com/posts?userId=${user.id}`)
                    .then(resp =>
                        resp.json()
                    )
                    .then(resp => {
                        resp.forEach(news => {
                            // Clone post template content
                            const clone = document.importNode(post.content, true);
                            // Find element with class "post-title" in post template content
                            const postTitle = clone.querySelector('.post-title');
                            // Insert title of each post in API to h3
                            postTitle.innerHTML = news.title;
                            // Find element with class "post-body" in post template content
                            const postBody = clone.querySelector('.post-body');
                            // Insert body post of each post in API to div with class "post-body"
                            postBody.innerHTML = news.body;
                            // Change display value to show ulList
                            ulList.style.display = "block"

                            ulList.appendChild(clone);
                        })
                    })
            });

            // Add cloned template content to div with id #usersList
            usersList.appendChild(clone);
        })
    })

我尝试通过第二次抓取中的标志来做到这一点，但失败了

let flag = true;

                            if (ulList.style.display = "none") {
                                flag = !flag;
                            } else {
                                flag = !flag;
                            }

                            if (flag) {
                                ulList.style.display = "none";
                                btn.innerHTML = "Show posts";
                            } else {
                                ulList.style.display = "block";
                                btn.innerHTML = "Hide posts";
                            }

HTML

<!doctype html>
<html lang="pl">

<head>
    <meta charset="utf-8">
    <title>Kurs JS - Ajax</title>
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/app.js" defer></script>
</head>

<body>
    <div class="users-list" id="usersList">

    </div>

    <template id="template">
        <article class="user-cnt" data-id="">
            <h2 class="user-name">{{userName}}</h2>
            <div class="address">
                Phone: {{phone}}<br>
                email: <a href="mailto: {{email}}">{{email}}</a>
            </div>

            <button type="button" class="btn show-posts" data-visible="false">
                Show posts
            </button>

            <ul class="user-posts">
                <!-- tutaj będą posty użytkownika -->
            </ul>
        </article>
    </template>

    <template id="post">
        <h3 class="post-title">{{title}}</h3>
        <div class="post-body">
            {{body}}
        </div>
    </template>
</body>

</html>

显示和隐藏API中的数据

0 个答案: