Javascript 如何显示单击按钮的文本，然后在单击新按钮时隐藏以前的文本

我试图使它，当我点击一个类别，文本，该类别出现。然后，单击新类别时，将删除以前的类别文本，并替换新类别的文本。现在，无论我点击什么按钮，所有项目都会出现

index.html

<div class='container'>
    <button class="button">Fit guide</button>
    <button class="button">Care</button>
    <button class="button">Materials</button>
    
    <div class="single-entry">
        <p class="fit">lkasdnf;aksdjf;askdjflkjsdhflkajsdhflaksjdhfaksjdhflkasjdhfasjdbflaksjdhflkasdjhfkajsdbas</p>

    </div>

    
    <div class="single-entry">
        <p>lkasdnf;aksdjf;askdjflkjsdhflkajsdhflaksjdhfaksjdhflkasjdhfasjdbflaksjdhflkasdjhfkajsdbas</p>

    </div>

    <div class="single-entry">
        <p>lkasdnf;aksdjf;askdjflkjsdhflkajsdhflaksjdhfaksjdhflkasjdhfasjdbflaksjdhflkasdjhfkajsdbas</p>

    </div>
</div>

安装导轨
照顾
材料
lkasdnf；aksdjf；askdjflkjsdhflkajsdhflaksjdhfaksjdhflkasjdhfasjdbflaksjdhflkasdjhfkajsdbas

lkasdnf；aksdjf；askdjflkjsdhflkajsdhflaksjdhfaksjdhflkasjdhfasjdbflaksjdhflkasdjhfkajsdbas

lkasdnf；aksdjf；askdjflkjsdhflkajsdhflaksjdhfaksjdhflkasjdhfasjdbflaksjdhflkasdjhfkajsdbas

index.js

const displayEntryButton = document.querySelectorAll('.button');
const test = document.querySelector('.fit');


for (var j = 0; j < displayEntryButton.length; j++) {
    displayEntryButton[j].addEventListener('click', function () {
        const allEntries = document.querySelectorAll('.single-entry');
        for (let index = 0; index < allEntries.length; index++) {
            if(allEntries[index].style.display === 'none') {
                allEntries[index].style.display = 'block'
            } else {
                allEntries[index].style.display = 'none';
            }
        }
    })

}

const displayEntryButton=document.queryselectoral（'.button'）；
常量测试=document.querySelector（'.fit'）；
对于（var j=0；j

我对您的代码进行了一些调整，以使其正常工作

我的调整主要是向每个输入div添加一个id，并向每个按钮添加一个匹配的数据值

单击按钮时，id和数据值用于比较。如果存在匹配项，则会显示相应的内容

请尝试下面的代码片段注释包含在代码中

const displayButtons=document.queryselectoral（'.button'）；
const entryDivs=document.querySelectorAll（'.single entry'）；
//开始循环以迭代每个按钮
对于（j=0；j

/*默认情况下，将所有条目设置为“无”*/
.单条记录{
显示：无；
}

安装导轨
照顾
材料
适合入口

护理条目

材料录入

谢谢！成功了。我想我需要更多的练习。我不认为使用数据值属性没有问题，很乐意帮助。-我会说还有其他几种方法可以做到这一点，但我不想偏离您使用的嵌套循环太远。祝你好运，快乐！我一直在寻找其他的方法来实现这一点，但老实说，我没能找到让它起作用的方法。