重构 javascript 代码以创建 for 循环

Question

I am practicing Javascript.我正在练习 Javascript。 I want each link to display something different in the DOM when clicked.我希望每个链接在单击时在 DOM 中显示不同的内容。

Here is my current Javascript that works.这是我目前有效的 Javascript。

//used a 'for' loop to hide each 'notes' page
const element = document.querySelectorAll(".notes");
for (let x = 0; x < element.length; x++)
  element[x].style.display = 'none';

const html_link= document.getElementById('html-link');
const css_link = document.getElementById('css-link');
const javascript_link = document.getElementById('js-link');

const html_notes = document.getElementById('html-notes');
const css_notes = document.getElementById('css-notes');
const js_notes = document.getElementById('js-notes');

html_link.onclick = function() {
    html_notes.style.display = "block";
    css_notes.style.display = "none";
    js_notes.style.display = "none";
}

css_link.onclick = function() {
    css_notes.style.display = "block";
    html_notes.style.display = "none";
    js_notes.style.display = "none";
}

javascript_link.onclick = () => {
    js_notes.style.display = "block";
    html_notes.style.display = "none";
    css_notes.style.display = "none";
}

How can I refactor it using a for loop?如何使用 for 循环重构它？ My thinking was for each link clicked, display notes.我的想法是为每个点击的链接显示注释。 But I am struggling to figure out how to display the notes div correctly that matches the link clicked.但我正在努力弄清楚如何正确显示与单击的链接匹配的注释 div。 This is what I have started.这就是我已经开始的。

const links = document.querySelectorAll('.links')

for (const link of links) {
  link.addEventListener('click', function() {

    let ref = event.target.parentElement.id.replace('link','notes'); 
//replaces parent element with id 'notes'
    const show = document.getElementById(ref);
//'show' div with new id

  })
}

Answer 1

Welcome, fellow newbie.欢迎，新人。 I've taken the liberty of writing the html and very minimal styling as well.我冒昧地编写了 html 和非常简单的样式。 This is my first attempt at an answer on stackoverflow.这是我第一次尝试在 stackoverflow 上回答。

Please note some features of the code I've added:请注意我添加的代码的一些功能：

'links' class added to all links. '链接' class 添加到所有链接。
'notes' class added to all notes. 'notes' class 添加到所有注释中。
'data-notes' attribute added to all links (with the id of each link's respective notes) 'data-notes' 属性添加到所有链接（每个链接各自注释的 id）

<!DOCTYPE html>
<html dir="ltr" lang="en-US">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
</head>

<body>

    <div class="outer">
        <div id="html-link" data-notes="html-notes" class="links">
            <p>html-link</p>
        </div>
        <div id="css-link" data-notes="css-notes" class="links">
            <p>css-link</p>
        </div>
        <div id="javascript-link" data-notes="javascript-notes" class="links">
            <p>javascript-link</p>
        </div>
    </div>

    <div class="outer">
        <div id="html-notes" class="notes">
            <p>html-notes</p>
        </div>
        <div id="css-notes" class="notes">
            <p>css-notes</p>
        </div>
        <div id="javascript-notes" class="notes">
            <p>javascript-notes</p>
        </div>
    </div>

    <style>
        .links {
            cursor: pointer;
            background: green;
            color: white;
            padding: 1rem;
            margin: 1rem;
        }

        .notes {
            display: none;
            background: blue;
            color: white;
            padding: 1rem;
            margin: 1rem;
        }

        .outer {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
            margin: 2rem 0;
        }

    </style>

    <script>
            const links = document.querySelectorAll('.links');
            const notes = document.querySelectorAll('.notes');

            for (const link of links) {
                link.onclick = function () {
                    for (const note of notes) {
                        if (note.id == link.dataset.notes) {
                            note.style.display = "block";
                        } else {
                            note.style.display = "none";
                        }
                    }
                }
            }

    </script>

</body>
</html>

重构 javascript 代码以创建 for 循环

问题描述

1 个解决方案

解决方案1
0 已采纳

重构 javascript 代码以创建 for 循环

问题描述

1 个解决方案

解决方案1 0 已采纳

解决方案1
0 已采纳