javascript - 添加多个事件监听器ajax
问题描述
我正在尝试迭代 ajax 查询,但是每当我尝试运行代码时,我总是默认为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){}
});
});
});
解决方案
data
您可以通过为每个“按钮”使用具有必要数据的属性来实现所需的结果。这可以通过以下方式提取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
应始终具有以字母字符开头的值。
推荐阅读
- java - 应用程序正在运行,但现在意外关闭
- ios - 为非程序员快速识别代码生成的 UIView 的快速方法是什么?
- javascript - Safari 浏览器出现空响应头 ajax 错误
- java - XML 外部实体注入:在此行上显示错误 DocumentBuilderFactory.newInstance().newDocumentBuilder().parse(new InputSource(sr));
- cyberduck - 同步与上传(用于备份到 webdav 服务器)
- postgresql - Kafka Connect - JSON 转换器 - JDBC Sink 连接器 - 列类型 JSON
- linux - 如何在linux中放大和缩小终端控制台
- hyperledger-fabric - Hyperledger Fabric 中链码级别的 ACL 跨多个组织的用户的唯一 ID
- python - 显示列修改错误。代码在循环外完美运行,但在循环内失败
- ios - 在颤动中将应用程序/八位字节流转换为图像/jpeg/png?