动态创建的div如何获取id？

Question

我想隐藏和显示动态创建的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";
 }
}

非常感谢您的帮助。

- Mario Muresean

Answer 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>

- MauriceNino