重构 javascript 代码以创建 for 循环

Question

我正在练习Javascript。单击时，我希望每个 link 在 DOM 中显示不同的内容。

这是我目前使用的 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";
}

如何使用 for 循环重构它？我的想法是 对于每个 link 单击，显示注释。 但我正在努力弄清楚如何正确显示与 [=25= 匹配的注释 div ] 点击。这就是我已经开始的。

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

欢迎新手！我冒昧地编写了 html 和非常简单的样式。这是我第一次尝试在 Whosebug 上回答。

请注意我添加的代码的一些功能：

'links' class 添加到所有 link 中。
'notes' class 添加到所有笔记。
'data-notes' 属性已添加到所有 link 中（带有每个 link 各自注释的 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 循环

refactoring javascript code to create for loop

javascript

refactoring

dom