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

Question

The abbreviated JS file below provides the same functionality for 100 buttons.

All buttons are identified by ID names such as #btn1, #btn2 etc.

The buttons trigger the hide/show of content contained within div tags labelled within corresponding class names such as .btn1, .btn2, etc.

For example, selecting #btn1 is tied to the content within content content content .

The process is to select a button, then whichever button is selected, hide the content within all the 100 DIVs and then show the selected button's associated content.

In writing the JS file I have written out the whole function 100 times - listing each one of 100 buttons to be selected, all 100 div areas to be hidden, and then the one div area to be shown.

How could this be simplified into a smarter and more concise function?

// 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();
  });
});

Etc., up to 100 buttons

// JavaScript Document

Answer 1

Assuming you can't change the html structure, I would probably do:

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

Which will listen to the click event on any element where the id starts with btn , then hide all elements where the class starts with btn , then show the element with the same class as the id that was just clicked (eg #btn2 click will show .btn2 )

Answer 2

something like this.

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

Answer 3

You can use a for loop to iterate from 0 to 100 :

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

Full version:

// 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

Common class and data attributes along with event delegation makes the code easier to maintain.

 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>

If you want to use 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>