使一个项目可见而所有其他项目不可见答案

【问题标题】：Making an item visible and all other items Invisible使一个项目可见而所有其他项目不可见
【发布时间】：2021-06-13 19:50:23
【问题描述】：

当点击包含 Excel 的链接时，所有包含文本 excel 格式的元素都将可见，而其他元素将不可见。请帮忙。

HTML：

let excel = document.getElementById('excel');
let csv = document.getElementById('csv');
let txt = document.getElementById('txt');
let json = document.getElementById('json');
let sheet = document.getElementById('sheet');
let mysql = document.getElementById('mysql');
let oracle = document.getElementById('oracle');
let postgresql = document.getElementById('postgresql');
let mssql = document.getElementById('mssql');

excel.addEventListener('click', function() {
  document.getElementById('excel').classList.remove('hidden');
});

<div class="flex flex-col md:w-5/12 w-full border-4 border-yellow-200 text-xs md:text-base p-2 sm:p-6 mt-12 mb-12 md:m-0">
  <p>Veri analizi hizmetinden yararlanmak için verilerinizi yükleyin.</p>
  <p class="mt-8"> Nasıl veri yükleneceğini bilmiyorsanız, aşağıda bulunan uygun formattaki dosya örneklerini indirebilirsiniz </p>
  <p class="mt-4"> Formatlar hakkında bilgi almak için formatların üstüne tıklayınız.</p>
  <div class="grid grid-cols-3 text-blue-500">
    <a href="#" id="excel"> Excel </a>
    <a href="#" id="csv"> Csv </a>
    <a href="#" id="txt"> Txt </a>
    <a href="#" id="json"> Json </a>
    <a href="#" id="sheets"> Sheets </a>
    <a href="#" id="mysql"> Mysql </a>
    <a href="#" id="oracle"> Oracle </a>
    <a href="#" id="postgresql"> Postgresql </a>
    <a href="#" id="mssql"> Mssql </a>
  </div>
  <div class="formats h-full w-full h-max flex justify-center items-center">
    <h1 id="excel-format" class="hidden"> Excel formatı </h1>
    <h1 id="csv-format" class="hidden"> Excel formatı </h1>
    <h1 id="txt-format" class="hidden"> Excel formatı </h1>
    <h1 id="json-format" class="hidden"> Excel formatı </h1>
    <h1 id="sheets-format" class="hidden"> Excel formatı </h1>
    <h1 id="mysql-format" class="hidden"> Excel formatı </h1>
    <h1 id="oracle-format" class="hidden"> Excel formatı </h1>
    <h1 id="postgresql-format" class="hidden"> Excel formatı </h1>
    <h1 id="mssql-format" class="hidden"> Excel formatı </h1>
  </div>
</div>

我使用 Tailwind Css 来设置网页的 CSS 样式。

【问题讨论】：

你也可以添加你正在使用的css规则
我正在使用顺风 css

标签： javascript laravel tailwind-css

【解决方案1】：

你能试试这个吗：

let excel = document.getElementById('excel');
let csv = document.getElementById('csv');
let txt = document.getElementById('txt');
let json = document.getElementById('json');
let sheet = document.getElementById('sheets');
let mysql = document.getElementById('mysql');
let oracle = document.getElementById('oracle');
let postgresql = document.getElementById('postgresql');
let mssql = document.getElementById('mssql');

let formats = [excel, csv, txt, json, sheet, mysql, oracle, postgresql, mssql];

formats.forEach(format => {
    format.addEventListener('click', function (e) {
        formats.forEach(otherFormat => {
            document.getElementById(otherFormat.id + '-format').classList.toggle("hidden",otherFormat !== format)
        })
    });
});

<div
    class="flex flex-col md:w-5/12 w-full border-4 border-yellow-200 text-xs md:text-base p-2 sm:p-6 mt-12 mb-12 md:m-0">
    <p>Veri analizi hizmetinden yararlanmak için verilerinizi yükleyin.</p>
    <p class="mt-8"> Nasıl veri yükleneceğini bilmiyorsanız, aşağıda bulunan uygun formattaki dosya örneklerini
        indirebilirsiniz </p>
    <p class="mt-4"> Formatlar hakkında bilgi almak için formatların üstüne tıklayınız.</p>
    <div class="grid grid-cols-3 text-blue-500">
        <a href="#" id="excel"> Excel </a>
        <a href="#" id="csv"> Csv </a>
        <a href="#" id="txt"> Txt </a>
        <a href="#" id="json"> Json </a>
        <a href="#" id="sheets"> Sheets </a>
        <a href="#" id="mysql"> Mysql </a>
        <a href="#" id="oracle"> Oracle </a>
        <a href="#" id="postgresql"> Postgresql </a>
        <a href="#" id="mssql"> Mssql </a>
    </div>
    <div class="formats h-full w-full h-max flex justify-center items-center">
        <h1 id="excel-format" class="hidden"> Excel formatı </h1>
        <h1 id="csv-format" class="hidden"> csv formatı </h1>
        <h1 id="txt-format" class="hidden"> txt formatı </h1>
        <h1 id="json-format" class="hidden"> json formatı </h1>
        <h1 id="sheets-format" class="hidden"> sheets formatı </h1>
        <h1 id="mysql-format" class="hidden"> mysql formatı </h1>
        <h1 id="oracle-format" class="hidden"> oracle formatı </h1>
        <h1 id="postgresql-format" class="hidden"> postgresql formatı </h1>
        <h1 id="mssql-format" class="hidden"> mssql formatı </h1>
    </div>
</div>

【讨论】：

document.getElementById(otherFormat.id + '-format').classList.toggle("hidden",otherFormat !== format)
哦，我不知道classList.toggle() 存在！我更新了我的答案谢谢。 @mplungjan

【解决方案2】：

你可以使用

string.includes('str_name')

要检查 Excel 是否存在，如果您使用的是 tailwind css，您应该 use class : invisible 而不是 hidden。

let excel = document.getElementById('excel');
let csv = document.getElementById('csv');
let txt = document.getElementById('txt');
let json = document.getElementById('json');
let sheet = document.getElementById('sheet');
let mysql = document.getElementById('mysql');
let oracle = document.getElementById('oracle');
let postgresql = document.getElementById('postgresql');
let mssql = document.getElementById('mssql');
let excontent = document.querySelectorAll('h1');

excel.addEventListener('click', function() {
  //excel.classList.remove('hidden');
  //console.log(excel);
  //console.log(excontent);
  excontent.forEach(q => {
      if(q.innerText.includes('Excel')){
          q.classList.remove('hidden');
      }
  })
});

.hidden{
    display: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="s.css">
</head>
<body>
    <div class="flex flex-col md:w-5/12 w-full border-4 border-yellow-200 text-xs md:text-base p-2 sm:p-6 mt-12 mb-12 md:m-0">
        <p>Veri analizi hizmetinden yararlanmak için verilerinizi yükleyin.</p>
        <p class="mt-8"> Nasıl veri yükleneceğini bilmiyorsanız, aşağıda bulunan uygun formattaki dosya örneklerini indirebilirsiniz </p>
        <p class="mt-4"> Formatlar hakkında bilgi almak için formatların üstüne tıklayınız.</p>
        <div class="grid grid-cols-3 text-blue-500">
          <a href="#" id="excel"> Excel </a>
          <a href="#" id="csv"> Csv </a>
          <a href="#" id="txt"> Txt </a>
          <a href="#" id="json"> Json </a>
          <a href="#" id="sheets"> Sheets </a>
          <a href="#" id="mysql"> Mysql </a>
          <a href="#" id="oracle"> Oracle </a>
          <a href="#" id="postgresql"> Postgresql </a>
          <a href="#" id="mssql"> Mssql </a>
        </div>
        <div class="formats h-full w-full h-max flex justify-center items-center">
          <h1 id="excel-format" class="hidden"> Excel formatı </h1>
          <h1 id="csv-format" class="hidden"> Excel formatı </h1>
          <h1 id="txt-format" class="hidden"> Excel formatı </h1>
          <h1 id="json-format" class="hidden"> Excel formatı </h1>
          <h1 id="sheets-format" class="hidden"> Excel formatı </h1>
          <h1 id="mysql-format" class="hidden"> Excel formatı </h1>
          <h1 id="oracle-format" class="hidden"> Excel formatı </h1>
          <h1 id="postgresql-format" class="hidden"> Excel formatı </h1>
          <h1 id="mssql-format" class="hidden"> Excel formatı </h1>
        </div>
      </div>
      <script src="app.js
      "></script>
</body>
</html>

同样，如果你使用，你可以使用检查和切换可见性

classList.add('hidden')

【讨论】：