文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何避免编写函数10次

问如何避免编写函数10次
EN

Stack Overflow用户
提问于 2017-03-15 19:07:01
回答 5查看 97关注 0票数 1

立即为这个模糊的标题道歉，不知道该如何解释。

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

​

代码语言：javascript
复制
$(document).ready(function () {
  note1btn.addEventListener("click", displayNote);

  //DISPLAY NOTE
  function displayNote() {
      $("#note1input").toggleClass("hide");
  }
});
代码语言：javascript
复制
.hide {
  visibility: hidden;
  height: 1px !important;
  padding: 0px !important;
  margin: 0px !important;
}
代码语言：javascript
复制
<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>

​

javascript
jquery
html
css
EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2017-03-15 19:16:44

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

代码语言：javascript
复制
$(document).on('click', 'selector', eventHandler)

不过，我建议您将HTML更改为使用像.note-button和.note-input这样的类，而不是对每个类使用硬编码的id。

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

​

​

演示片段：

​

代码语言：javascript
复制
$(document).on('click', '.note-button', function displayNote() {
  $(this).next('.note-input').toggleClass('hide')
})
代码语言：javascript
复制
.hide { display: none; }
代码语言：javascript
复制
<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>

​

票数 2
EN

Stack Overflow用户

发布于 2017-03-15 19:10:01

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

此外，您还混合了jQuery和常规DOM调用。仅使用jQuery要容易得多。在你的JS中：

代码语言：javascript
复制
$('.notebutton').click( function(e) {
    e.preventDefault();
    $(this).next().toggleClass("hide");
});

函数中的this引用单击的项。因此，使用next()获取下面的文本区域。

票数 4
EN

Stack Overflow用户

发布于 2017-03-15 19:11:02

由于使用的是$(this)keyword that refer to the current clickedbuttonand target the nexttextareausing.next()`事件，所以可以使用选择器将click事件附加到元素组，因此在本例中，您可以使用属性选择器[]和开始选择器(^)来针对所有以note开头的按钮，然后使用note方法，您的代码如下：

代码语言：javascript
复制
$(document).ready(function() {
    $("body").on('click', '[id^="note"]', function(e) {
        $(this).toggleClass("hide");
    });
});

或者，您可以提供所有按钮的公共类，并将其用作选择器，如下所示：

代码语言：javascript
复制
$(document).ready(function() {
    $("body").on('click', '.notebutton', function(e) {
        $(this).next('textarea').toggleClass("hide");
    });
});

注意:如果您的button位于form中，它们都将充当提交按钮，因此您可以使用e.prevenDefault()防止js中的默认行为，或者将type='button'添加到form代码中：

代码语言：javascript
复制
$(document).ready(function() {
    $("body").on('click', '[id^="note"]', function(e) {
        e.prevenDefault();

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

希望这能有所帮助。

​

代码语言：javascript
复制
$(document).ready(function() {
  $("body").on('click', '[id^="note"]', function(e) {
      $(this).next('textarea').toggleClass("hide");
  });
});
代码语言：javascript
复制
.hide {
    display: none;
    height: 1px !important;
    padding: 0px !important;
    margin: 0px !important;
}
代码语言：javascript
复制
<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>

​

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/42818632

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档