javascript - 如何避免写一个函数 10 次

Question

立即为含糊不清的标题道歉，我真的不确定如何解释。

基本上我有 10 个按钮和 10 个不同的 ID，当我单击它们时，我希望它们切换文本区域元素的类。我想知道是否有某种循环可以避免使用 10 个事件监听器来调用 10 个不同的函数来切换不同文本区域的类。希望这是有道理的，任何帮助将不胜感激。我将在下面发布相关代码。

$(document).ready(function () {
  note1btn.addEventListener("click", displayNote);

  //DISPLAY NOTE
  function displayNote() {
      $("#note1input").toggleClass("hide");
  }
});

.hide {
  visibility: hidden;
  height: 1px !important;
  padding: 0px !important;
  margin: 0px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="note1btn" data-role="button">Note #1</button>
<textarea id="note1input" class="hide" rows="10" cols="50"></textarea>
<button id="note2btn" data-role="button">Note #2</button>
<textarea id="not2input" class="hide" rows="10" cols="50"></textarea>
<button id="note3btn" data-role="button">Note #3</button>
<textarea id="not3input" class="hide" rows="10" cols="50"></textarea>
<button id="note4btn" data-role="button">Note #4</button>
<textarea id="note4input" class="hide" rows="10" cols="50"></textarea>
<button id="note5btn" data-role="button">Note #5</button>
<textarea id="note5input" class="hide" rows="10" cols="50"></textarea>
<button id="note6btn" data-role="button">Note #6</button>
<textarea id="note6input" class="hide" rows="10" cols="50"></textarea>
<button id="note7btn" data-role="button">Note #7</button>
<textarea id="note7input" class="hide" rows="10" cols="50"></textarea>
<button id="note8btn" data-role="button">Note #8</button>
<textarea id="note8input" class="hide" rows="10" cols="50"></textarea>
<button id="note9btn" data-role="button">Note #9</button>
<textarea id="note9input" class="hide" rows="10" cols="50"></textarea>
<button id="note10btn" data-role="button">Note #10</button>
<textarea id="note10input" class="hide" rows="10" cols="50"></textarea>

Answer 1

为每个按钮添加一个类，如 class="notebutton"，然后为该类指定一个事件。

您还混合了 jQuery 和常规 DOM 调用。使用 jQuery 更容易。在你的 JS 中做:

$('.notebutton').click( function(e) {
    e.preventDefault();
    $(this).next().toggleClass("hide");
});

函数中的

this 指的是被点击的元素。所以使用 next() 来获取后面的文本区域。