添加多个事件监听器ajax答案

【问题标题】：adding multiple event listeners ajax添加多个事件监听器ajax
【发布时间】：2020-01-08 14:04:54
【问题描述】：

我正在尝试迭代 ajax 查询，但是每当我尝试运行代码时 i 总是默认为 1 我对 js 不是很熟悉，想知道是否任何人都知道如何做到这一点，或者是否有更好的方法来做到这一点。提前致谢！

$.each(Array(10), function(i) {
            var clickedButton = $('#' + (++i));
            $(clickedButton).click(function (){
                $.ajax({
                    type: 'POST',
                    url: 'example.php',
                    data: {lightid: i},
                    success:function(result){}
                });
            });
          });

【问题讨论】：

您的问题有点误导 - 您不是在尝试迭代 ajax 查询，您的目标是将侦听器附加到执行几乎相同操作的多个按钮（只是传递不同的数据） - 是的？如果是这样，您能否解释一下什么不起作用？ “我运气不好”并没有给我们太多的继续......
您似乎想为一系列按钮添加一个事件监听器。这通过使用像$('.clickbtn').click(...) 这样的基于类的选择器更容易实现。不需要迭代。
@chazsolo 嗨，抱歉没有具体说明，我已经更新了这个问题，希望能让您对我遇到的问题有更多的了解
您能提供更多的上下文吗？ numberlight 是什么？我建议在您的问题中添加一个可运行的 sn-p。
@cars10m 问题是我需要每个事件侦听器根据按钮发送略有不同的数据。这就是为什么我在 ajax 查询的 data 部分中有 i 变量的原因

标签： javascript ajax iteration

【解决方案1】：

您可以通过使用 dataattribute 以及每个“按钮”的必要数据来实现所需的结果。这可以通过this.dataset.<attribute-name> 挑选出来并发送到服务器：

$('[data-id]').on('click',function(){
 $.post('https://jsonplaceholder.typicode.com/posts',{lightid:this.dataset.id})
  .done(r=>console.log(r))
})

div[data-id] {cursor:pointer}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>Click on any div below:</div>
<div data-id="1">one</div>
<div data-id="2">two</div>
<div data-id="3">three</div>
<div data-id="4">four</div>
<div data-id="5">five</div>
<div data-id="6">six</div>
<div data-id="7">seven</div>
<div data-id="8">oneeight</div>
<div data-id="9">nine</div>
<div data-id="10">ten</div>

我使用属性 data-id 来保存数字信息，因为 html 属性 id 应该始终具有以字母字符开头的值。

【讨论】：