如何简化这个 JavaScript 函数。 我有 100 个按钮控制 100 个内容区域的显示/隐藏显示

Question

下面的缩写 JS 文件为 100 个按钮提供了相同的功能。

所有按钮均由 ID 名称标识，例如 #btn1、#btn2 等。

这些按钮会触发隐藏/显示包含在相应类名称（如 .btn1、.btn2 等）中标记的 div 标签中的内容。

例如，选择 #btn1 与 content content content 中的内容相关联。

该过程是选择一个按钮，然后选择哪个按钮，隐藏所有 100 个 DIV 中的内容，然后显示所选按钮的关联内容。

在编写 JS 文件时，我已经写了 100 次整个函数 - 列出要选择的 100 个按钮中的每一个，要隐藏所有 100 个 div 区域，然后显示一个要显示的 div 区域。

如何将其简化为更智能、更简洁的功能？

// JavaScript Document
$(document).ready(function() {
  $('#btn0').click(function() {
    location.reload();
  });
});

$(document).ready(function() {
  $('#btn1').click(function() {
    $('.btn0').hide();
    $('.btn1').hide();
    $('.btn2').hide();
    $('.btn3').hide();
    $('.btn4').hide();
    $('.btn5').hide();
    $('.btn6').hide();
    $('.btn7').hide();
    $('.btn8').hide();
    $('.btn9').hide();
    $('.btn10').hide();
    $('.btn11').hide();
    $('.btn11').hide();
    $('.btn12').hide();
    $('.btn13').hide();
    $('.btn14').hide();
    $('.btn15').hide();
    $('.btn16').hide();
    $('.btn17').hide();
    $('.btn18').hide();
    $('.btn19').hide();
    $('.btn20').hide();
    $('.btn21').hide();
    $('.btn22').hide();
    $('.btn23').hide();
    $('.btn24').hide();
    $('.btn25').hide();
    $('.btn26').hide();
    $('.btn27').hide();
    $('.btn28').hide();
    $('.btn29').hide();
    $('.btn30').hide();
    $('.btn31').hide();
    $('.btn32').hide();
    $('.btn33').hide();
    $('.btn34').hide();
    $('.btn35').hide();
    $('.btn36').hide();
    $('.btn37').hide();
    $('.btn38').hide();
    $('.btn39').hide();
    $('.btn40').hide();
    $('.btn41').hide();
    $('.btn42').hide();
    $('.btn43').hide();
    $('.btn44').hide();
    $('.btn45').hide();
    $('.btn46').hide();
    $('.btn47').hide();
    $('.btn48').hide();
    $('.btn49').hide();
    $('.btn50').hide();
    $('.btn51').hide();
    $('.btn52').hide();
    $('.btn53').hide();
    $('.btn54').hide();
    $('.btn55').hide();
    $('.btn51').hide();
    $('.btn52').hide();
    $('.btn53').hide();
    $('.btn54').hide();
    $('.btn55').hide();
    $('.btn56').hide();
    $('.btn57').hide();
    $('.btn58').hide();
    $('.btn59').hide();
    $('.btn60').hide();
    $('.btn61').hide();
    $('.btn62').hide();
    $('.btn63').hide();
    $('.btn64').hide();
    $('.btn65').hide();
    $('.btn66').hide();
    $('.btn67').hide();
    $('.btn68').hide();
    $('.btn69').hide();
    $('.btn70').hide();
    $('.btn71').hide();
    $('.btn72').hide();
    $('.btn73').hide();
    $('.btn74').hide();
    $('.btn75').hide();
    $('.btn76').hide();
    $('.btn77').hide();
    $('.btn78').hide();
    $('.btn79').hide();
    $('.btn80').hide();
    $('.btn81').hide();
    $('.btn82').hide();
    $('.btn83').hide();
    $('.btn84').hide();
    $('.btn85').hide();
    $('.btn86').hide();
    $('.btn87').hide();
    $('.btn88').hide();
    $('.btn89').hide();
    $('.btn90').hide();
    $('.btn91').hide();
    $('.btn92').hide();
    $('.btn93').hide();
    $('.btn94').hide();
    $('.btn95').hide();
    $('.btn96').hide();
    $('.btn97').hide();
    $('.btn98').hide();
    $('.btn99').hide();
    $('.btn100').hide();
    $('.btn98').hide();
    $('.btn99').hide();
    $('.btn100').hide();
    $('.btn1').show();
  });
});

$(document).ready(function() {
  $('#btn2').click(function() {
    $('.btn0').hide();
    $('.btn1').hide();
    $('.btn2').hide();
    $('.btn3').hide();
    $('.btn4').hide();
    $('.btn5').hide();
    $('.btn6').hide();
    $('.btn7').hide();
    $('.btn8').hide();
    $('.btn9').hide();
    $('.btn10').hide();
    $('.btn11').hide();
     …………………….. BTN12 to 97 ……………………..
    $('.btn98').hide();
    $('.btn99').hide();
    $('.btn100').hide();
    $('.btn1').show();
  });
});

等，最多 100 个按钮

// JavaScript 文档

Answer 1

假设您无法更改 html 结构，我可能会这样做：

$('[id^="btn"]').on('click', function() {
    const id = $(this).attr('id');
    $('[class^="btn"]').hide();
    $(`.${id}`).show();
});

它将侦听 id 以btn开头的任何元素上的click事件，然后隐藏类以btn开头的所有元素，然后显示与刚刚单击的 id 具有相同类的元素（例如， #btn2 click 将显示.btn2 )

Answer 2

像这样的东西。

    for(let i = 0;i<=99;i++){
        let btnclass= ".btn" + i;
        $(btnclass).hide()
     }

Answer 3

您可以使用for 循环从0到100进行迭代：

$(document).ready(function() {
    $("#btn1").click(function() {
        for (let i = 0; i <= 100; i++) {
            $(`.btn${i}`).hide();
        }
    });
})

完整版：

// JavaScript Document
$(document).ready(function() {
  $("#btn0").click(function() {
    location.reload();
  });
});
$(document).ready(function() {
  $("#btn1").click(function() {
    for (let i = 0; i <= 100; i++) {
      $(`.btn${i}`).hide();
    }
  });
})
$(document).ready(function() {
  $("#btn2").click(function() {
    for (let i = 0; i <= 100; i++) {
      $(`.btn${i}`).hide();
    }
  });
});

Answer 4

通用类和数据属性以及事件委托使代码更易于维护。

 document.querySelector("#wrapper").addEventListener("click", function (event) { var toggles = event.target.dataset.toggles; // Hide previous selected elements var selectedElems = document.querySelectorAll(".out.selected"); if (selectedElems.length){ selectedElems.forEach(function (elem) { elem.classList.remove("selected"); }); } // show the new active elements const activeElems = document.querySelectorAll(toggles); if (activeElems.length){ activeElems.forEach(function (elem) { elem.classList.add("selected"); }); } });

 .out { display: none; } .out.selected { display: block; }

 <div id="wrapper"> <button id="btn1" data-toggles=".out1">1</button> <button id="btn2" data-toggles=".out2">2</button> <button id="btn3" data-toggles=".out3">3</button> <button id="btn4" data-toggles=".out4">4</button> </div> <div class="out out1">1</div> <div class="out out2">2</div> <div class="out out3">3</div> <div class="out out4">4</div>

如果你想使用 jQuery

 $("#wrapper").on("click", "[data-toggles]", function (event) { var toggles = $(this).data('toggles'); $(".out.selected").removeClass("selected"); $(toggles).addClass("selected"); });

 .out { display: none; } .out.selected { display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="wrapper"> <button id="btn1" data-toggles=".out1">1</button> <button id="btn2" data-toggles=".out2">2</button> <button id="btn3" data-toggles=".out3">3</button> <button id="btn4" data-toggles=".out4">4</button> </div> <div class="out out1">1</div> <div class="out out2">2</div> <div class="out out3">3</div> <div class="out out4">4</div>