时间戳

首页 > 解决方案 > 如何从单击的按钮中显示文本，然后在单击新按钮时隐藏以前的文本

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

问题描述

我正在努力做到这一点，以便当我单击一个类别时，会出现该类别的文本。然后，当单击新类别时，先前的类别文本将被删除，新类别的文本将取而代之。现在，无论我点击什么按钮，所有项目都会出现。

索引.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>

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';
            }
        }
    })

}

标签： javascriptloopsfor-loop

解决方案

我已经稍微调整了您的代码以使事情正常进行。

我的调整主要是为每个条目 div 添加一个id ，并为每个按钮添加一个匹配的数据值。

然后在单击按钮时使用id和data-value进行比较。如果匹配，则显示相应的内容。

试试下面的片段。- 注释包含在代码中。

const displayButtons = document.querySelectorAll('.button');
const entryDivs = document.querySelectorAll('.single-entry');

//start for loop to iterate over each button
for (j = 0; j < displayButtons.length; j++) {
  //btnValue is declared to capture the data-value attribute
  const btnValue = displayButtons[j].getAttribute('data-value');
  displayButtons[j].addEventListener('click', function() {
    //nested loop to iterate over each entry div
    for (i = 0; i < entryDivs.length; i++) {
      //entryId is declared to capture the div id
      const entryId = entryDivs[i].id;
      //if btnValue matches entryId
      if (btnValue === entryId) {
        //show the corresponding content
        entryDivs[i].style.display = "block"
      } else {
        //otherwise show nothing
        entryDivs[i].style.display = "none"
      }
    }
  })
}
/*set all entries to display none by default*/

.single-entry {
  display: none;
}
<div class='container'>

  <!-- Here we are setting a data-value on each button -->
  <!-- The data-value must match the id for each corresponding div -->
  <button class="button" data-value="fit">Fit guide</button>
  <button class="button" data-value="care">Care</button>
  <button class="button" data-value="materials">Materials</button>

  <!-- Each div below has an id to match each buttons data-value -->
  <div class="single-entry" id="fit">
    <p>FIT ENTRY</p>
  </div>

  <div class="single-entry" id="care">
    <p>CARE ENTRY</p>
  </div>

  <div class="single-entry" id="materials">
    <p>MATERIALS ENTRY</p>
  </div>

</div>

推荐阅读