Question

我在JavaScript中的for循环下有动态创建的html元素，这些动态元素也有动态id，我的问题是我如何用动态id隐藏动态创建的元素。谢谢。

到目前为止，这是我的代码。我想定位动态ID并隐藏它。

product_list += '<div class="plProductContainer hide" data-pids="' + a_data.products[i].pid + '" id="'+a_data.products[i].pid+'">';

它有动态ID。

Answer 1

我建议你使用类而不是id，但是对于这个例子你可以使用这样的东西。使用类隐藏元素。

$(document).ready(function(){
  $(function(){
    $(".add-more").on("click", function(){
      var list  = $(".list");
      
      var random_id = Math.floor(Math.random() * (99999 - 1 + 1)) + 1;
      
      var child = document.createElement("li");
      var text  = document.createTextNode("Lorem Ipsum");
          child.setAttribute("id", random_id);
          child.appendChild(text);
      
      list.append(child);
    });
  });
  
  $(function(){
    $(".list").on("click", "li", function(){
      var id = $(this).attr("id");
      $("#" + id).addClass("hidden");
      
      console.log("This id: " + id + " is hidden");
    });
  });
});

a{
  color: blue;
  cursor: pointer;
}

ul{
  margin-top: 20px;
  padding: 0;
}

li{
  list-style: none;
  cursor: pointer;
}
li:hover{
  color: red;
}
li + li{
  margin-top: 20px;
}
li.hidden{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<div>
  <a class="add-more">Click me!</a>
</div>

<ul class="list">
  <li id="0">Lorem Ipsum</li>
</ul>

Answer 2

document.getElementById（a_data.products [i] .pid）.style.display =＆＃39; none＆＃39;;

Answer 3

让我假设你正在使用jquery。尝试这样的事情：

$(".plProductContainer.hide").hide();

或

var elementId = $(".plProductContainer.hide").attr("id");
$("#"+elementId).hide();

或如果你的元素在id为someId的另一个元素中，那么：

$("#"+someId).children()[i].hide(); //i is the loop counter that you have used to create element dynamically

或

$("#"+a_data.products[i].pid).hide(); //i is the loop counter that you have used to create element dynamically

如果您已经知道循环计数器的值，即i的值，则变得更容易，如果您不知道那么您也可以使用像第n个孩子这样的选择器。如果以上任何一项工作，请告诉我，否则我会提出更多选择。

如何使用动态ID隐藏动态创建的html元素

3 个答案: