javascript - 将整数添加到字符串
问题描述
我正在尝试向卡 ID 添加一个整数,以便在按下删除按钮时可以将其删除。有什么帮助吗?
var variable = '' +
'<div id="card+$num.toString(cnt);" class="card col-3" style="width: 18rem;" style="margin-right=3%; margin-right=3%">' +
' <img src="..." class="card-img-top" alt="..." id="image"+String(cnt)>' +
' <div class="card-body">' +
' <h5 class="card-title" id="title"+String(cnt) contentEditable="true"; >Card title</h5>' +
' <p class="card-text" id="desc"+String(cnt) contentEditable="true">Some quick example text to build on the card title and make up the' +
' bulk of the' +
' card\'s content.</p>' +
' <a href="#" class="btn btn-primary" id="button"+ String(cnt) >Go somewhere</a>' +
' <a href="#" id="btn"+String(cnt) class="close"+String(cnt)>Delete</a>' +
' </div>' +
' </div>' +
'';
$(".create").click(function(){
document.getElementById("lastRow").innerHTML+=variable;
});
$(".close"+String(cnt)).click(function(){
console.log("Doulevw!");
document.getElementById("card"+String(cnt)).hidden=true;
});
解决方案
使用 js 渲染动态元素时,有几个概念需要了解。
你的按钮有一个
click
监听器。.close
此侦听器永远不会触发,因为此侦听器仅与您的初始 DOM 相关。但是您的关闭按钮是动态呈现的,这意味着侦听器与您的按钮无关。onclick
通过附加到按钮并创建一个函数来轻松解决这个问题。(示例如下)我检查了您的代码,您不必使用 id 机制来删除/隐藏您的
card
元素(除非您需要触发POST
请求),您可以使用parentNode
(示例如下)
我对您的代码做了一些简单的更改:
$(".create").click(function(){
let element = `
<div id="card" class="card col- 3" style="width:18rem;style="margin-right=3%; margin-right=3%"><img src="..." class="card-img-top" alt="..." id="image"+String(cnt)><div class="card-body"><h5 class="card-title" id="title" contentEditable="true">Card title</h5><p class="card-text" id="desc" contentEditable="true">Some quick example text to build on the card title and make up the bulk of the' card\'s content.</p><a href="#" class="btn btn-primary" id="button"+ String(cnt) >Go somewhere</a><a href="#" class="close" onclick='deleteCard(this)'>Delete</a></div></div>`;
document.getElementById("lastRow").innerHTML+=element;
});
function deleteCard(delBtn){
delBtn.parentNode.parentNode.hidden = true
}
注意我添加的功能和启用隐藏操作的 onclick。这是一个编码链接,供您自行测试我所做的事情。
希望这会有所帮助,任何其他问题都会很好:)
推荐阅读
- html - 用 svg 矩形的笔划制作一个完美的循环
- python - Tensorflow - 带有 sample_weight 的自定义损失函数
- c++ - 给定特定内存地址的数组的动态内存分配开始
- python - 将数据框与分层索引合并?
- db2 - IBM 中 Db2 的凭证
- javascript - 如何在 Google Apps 脚本中向 CSV 文件添加列(具有静态值)?
- regex - 如何删除正则表达式中多行中的特殊字符?
- python - 将CSV转换为JSON时,空单元格变为“” - Python
- javascript - 有没有办法使用 ReactJS 在三元运算符中重构多个内联 CSS?
- kubeflow - Kubeflow 管道错误“模块 'kfp.dsl' 没有属性 'RUN_ID_PLACEHOLDER'”