Question

对于模糊的标题立即道歉，并不确定如何解释。

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

$(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()来获取后面的textarea。

Answer 2

由于您使用的是jQuery，因此您可以使用选择器将click事件附加到元素组，因此在这种情况下，您可以将属性选择器[]与选择器^一起使用）使用note开始定位所有按钮，然后使用$（this）keyword that refer to the current clicked按钮and target the next textarea using。next（）`方法，您的代码将如下：

$(document).ready(function() {
    $("body").on('click', '[id^="note"]', function(e) {
        $(this).toggleClass("hide");
    });
});

或者您可以将所有按钮设为一个公共类，并将其用作选择器，如：

$(document).ready(function() {
    $("body").on('click', '.notebutton', function(e) {
        $(this).next('textarea').toggleClass("hide");
    });
});

注意：如果您的button位于form内，则它们都将充当提交按钮，因此您可以使用{阻止js中的默认行为{1}}或将e.prevenDefault()添加到HTML代码中：

type='button'

希望这有帮助。

$(document).ready(function() {
    $("body").on('click', '[id^="note"]', function(e) {
        e.prevenDefault();

        $(this).next('textarea').toggleClass("hide");
    });
});

$(document).ready(function() {
  $("body").on('click', '[id^="note"]', function(e) {
      $(this).next('textarea').toggleClass("hide");
  });
});

.hide {
    display: none;
    height: 1px !important;
    padding: 0px !important;
    margin: 0px !important;
}

Answer 3

您可以使用jQuery的事件委派功能使用以下语法处理任意数量的注释：

$(document).on('click', 'selector', eventHandler)

我建议您更改HTML以使用.note-button和.note-input等类，而不是为每个类使用硬编码id。

最后，友情提醒您可以使用display: none隐藏CSS中的元素。

<小时/>

演示片段：

$(document).on('click', '.note-button', function displayNote() {
  $(this).next('.note-input').toggleClass('hide')
})

.hide { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="note-button">Note #1</button>
<textarea class="note-input hide" rows="10" cols="50"></textarea>

<button class="note-button">Note #2</button>
<textarea class="note-input hide" rows="10" cols="50"></textarea>

<button class="note-button">Note #3</button>
<textarea class="note-input hide" rows="10" cols="50"></textarea>

<button class="note-button">Note #4</button>
<textarea class="note-input hide" rows="10" cols="50"></textarea>

<button class="note-button">Note #5</button>
<textarea class="note-input hide" rows="10" cols="50"></textarea>

<button class="note-button">Note #6</button>
<textarea class="note-input hide" rows="10" cols="50"></textarea>

<button class="note-button">Note #7</button>
<textarea class="note-input hide" rows="10" cols="50"></textarea>

<button class="note-button">Note #8</button>
<textarea class="note-input hide" rows="10" cols="50"></textarea>

<button class="note-button">Note #9</button>
<textarea class="note-input hide" rows="10" cols="50"></textarea>

<button class="note-button">Note #10</button>
<textarea class="note-input hide" rows="10" cols="50"></textarea>

Answer 4

我会考虑像这样重新构建DOM

$('.note-input button').click(function(){
  $(this).parent().find('textarea').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>

<div class="note-input">
  <button data-role="button">Note #1</button>
  <br> 
  <textarea name="note1" class="hide" rows="10" cols="50"></textarea>
</div>
<div class="note-input">
  <button data-role="button">Note #2</button>
  <br> 
  <textarea name="note2" class="hide" rows="10" cols="50"></textarea>
</div>
<div class="note-input">
  <button data-role="button">Note #3</button>
  <br> 
  <textarea name="note3" class="hide" rows="10" cols="50"></textarea>
</div>
<div class="note-input">
  <button data-role="button">Note #4</button>
  <br> 
  <textarea name="note4" class="hide" rows="10" cols="50"></textarea>
</div>
<div class="note-input">
  <button data-role="button">Note #5</button>
  <br> 
  <textarea name="note5" class="hide" rows="10" cols="50"></textarea>
</div>
<div class="note-input">
  <button data-role="button">Note #6</button>
  <br> 
  <textarea name="note6" class="hide" rows="10" cols="50"></textarea>
</div>
<div class="note-input">
  <button data-role="button">Note #7</button>
  <br> 
  <textarea name="note7" class="hide" rows="10" cols="50"></textarea>
</div>
<div class="note-input">
  <button data-role="button">Note #8</button>
  <br> 
  <textarea name="note8" class="hide" rows="10" cols="50"></textarea>
</div>
<div class="note-input">
  <button data-role="button">Note #9</button>
  <br> 
  <textarea name="note9" class="hide" rows="10" cols="50"></textarea>
</div>
<div class="note-input">
  <button data-role="button">Note #10</button>
  <br> 
  <textarea name="note10" class="hide" rows="10" cols="50"></textarea>
</div>

Answer 5

我可以想到从我的工作中解决这个问题的两种方法。

第一种方式： - 使用onclick html属性

这里基本上你将把对象dom本身发送到函数并使用jQuery的next() function 以下是link of stackoverflow以更好地理解此解决方案。

HTML

<button id="note1btn" data-role="button" onclick="myFunc(this)">Note #1</button>  
<textarea id="note1text" class="toggle" rows="10" cols="50"></textarea>

脚本

myFunc(domObj){
   $(this).next().toggleClass('toggle');
}

第二种方式： - 使用选择器

在我回答之前，许多其他人已经给出了这个答案（@ Zakaria Acharki，@ igyre，@ Earthchie，以及其他人，如果我错过了任何人），所以我将简要解释一下这个问题。< / p>

基本上按照@ Zakaria的回答，您只需将事件监听器附加到该特定的类/属性并运行该脚本。

我没有足够的知识来争论哪一个更好，哪个更好，因此我不会追求你应该使用哪种方法，但我向你保证两者都会以同样的方式工作。

我还称第三种方式是黑客方式。

第三种方法： - 黑客方式

在此方法中，您将把元素的ID传递给函数，例如： -

HTML： -

<button id="note1btn" data-role="button" onclick="myFunc('note1text')">Note #1</button>
<textarea id="note1text" class="hide" rows="10" cols="50"></textarea>

脚本

myFunc(id){
    $(id).toggleClass("hide");
}

如何避免写一个函数10次

5 个答案: