html 我可以在div内部的按钮单击中获取div元素(由JavaScript循环创建)的位置吗?

wbrvyc0a  于 2022-11-27  发布在  Java
关注(0)|答案(1)|浏览(124)

我想使用javascript变量将一个值从html发送到javascript。
我用javascript创建了一个div,如下所示:

<body>
<div id="row" class="category-cards">
// creates from js
</div>
</body>

<script>

var d1 = document.getElementById("row");
for (let i=5; i>0; i--) {

d1.insertAdjacentHTML('beforeend', 
 <div class="card card-small card-category">
 <div class="card-del-btn">
 <button id="btnDel" onclick="deleteCategory(i)"> <b> × </b> </button>
 </div>
 <!-- displays the record --!>
 </div>
}

function deleteCategory(index){
// takes the index and searches the mysql database for match, and deletes the record
}
</script>

for循环的每次迭代都会从数据库中插入一张记录卡,当单击按钮时,我希望从文档和数据库中删除该记录。
是否有办法将一个唯一的id或值与每张卡相关联,并通过onclick发送它?
我尝试过发送i的值,但它总是最后一个索引,在本例中是0。

xn1cxnb4

xn1cxnb41#

有很多方法可以实现你所寻找的,但最简单的一个是使用自定义html属性,并提供触发事件的元素作为回调的参数。
这可以这样实现

function handleClick(element) {
const elementData = element.getAttribute('data-my-data')
// do some stuff here with element data
}

使用代码:

d1.insertAdjacentHTML('beforeend', `
<div class="card card-small card-category">
 <div class="card-del-btn">
 <button data-my-data="here goes your data" onclick="handleClick(element)"> <b> × </b> </button>
 </div>
 </div>
`)

相关问题