将整数添加到字符串

Question

我正在尝试向卡片 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;
  });

Answer 1

用js渲染动态元素需要知道的几个概念

您的 .close 按钮有一个 click 侦听器。此侦听器永远不会触发，因为此侦听器仅与您的初始 DOM 相关。但是您的关闭按钮是动态呈现的，这意味着该侦听器与您的按钮无关。通过将 onclick 附加到按钮并创建一个函数来轻松解决该问题。（示例如下）
我检查了你的代码，你不必使用 id 机制来 delete/hide 你的 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。这里有一个codepedlink让你自己测试我做了什么。

希望这对您有所帮助，如有任何其他问题，欢迎提问:)

将整数添加到字符串

Adding an integer to string

html

javascript

integer