获取动态创建的 div 的 id [重复]答案

【问题标题】：Get id's of dynamically created divs [duplicate]获取动态创建的 div 的 id [重复]
【发布时间】：2021-08-07 09:53:37
【问题描述】：

我想隐藏和显示动态创建的 div。我通过按下按钮类别来创建 div。

<button id="Category">Add category</button>

然后使用 jquery 使用以下函数将该 div 添加到 DOM 中，所以每次我想隐藏和显示这个 div 时我只需单击按钮。

$(document).ready(function () {
   $("#Category").click(function () {
   var categoria = prompt("Introduce el nombre de la categoria");
   nombreCategoria = categoria;
   $("#Productos").append('<div id=' + '"' + categoria + '"' + '><br><button onclick=' + '"' + 
 category+ '()"' + '>' + categoria + '</button></div>');
 });
});

但我的问题是我不知道如何获取动态创建的 div 的 id，所以每次我点击任何创建 div 的名称时它都会隐藏或显示。

我使用以下函数隐藏和显示一个已经创建的 div，但这不适用于动态创建的 div。

function category() {
  var x = document.getElementById("ordenadores");
  if (x.style.display === "none") {
   x.style.display = "block";
  } else {
  x.style.display = "none";
 }
}

任何帮助将不胜感激。

【问题讨论】：

标签： javascript html jquery

【解决方案1】：

使用您的示例，您可以像这样将 id 传递给函数：

$(document).ready(function () {
   $("#Category").click(function () {
   var categoria = prompt("Introduce el nombre de la categoria");
   nombreCategoria = categoria;
   $("#Productos").append('<div id=' + '"' + categoria + '"' + '><br><button onclick=' + '"' + 
 category+ '("' + categoria + '")"' + '>' + categoria + '</button></div>');
 });
});

那么你可以这样读：

function category(catId) {
  var x = document.getElementById(catId);
  if (x.style.display === "none") {
   x.style.display = "block";
  } else {
  x.style.display = "none";
 }
}

或者您可以省略 id 并以更动态的方式进行操作，如下所示：

$('body').on('click', '#add-el', () => {
  $('#container').append(`
  <div>
    <div>text</div>
    <button class="el-hider">Hide/Show</button>
  </div>`);
});

$('body').on('click', '.el-hider', ({target}) => {
  const element = $(target).parent().children()[0];
  
  if($(element).is(":visible")) {
    $(element).hide();
  } else {
    $(element).show();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add-el">Add element</button>
<div id="container">

</div>

【讨论】：

谢谢，成功了！