时间戳

首页 > 解决方案 > 如何简化这个 JavaScript 函数。我有 100 个按钮控制 100 个内容区域的显示/隐藏显示

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

问题描述

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

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

按钮触发隐藏/显示包含在相应类名中标记的 div 标记中的内容，例如 .btn1、.btn2 等。

例如，选择 #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 文档

标签： javascriptbutton

解决方案

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

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>

推荐阅读