javascript - 如何为多个 Action 做简单的jquery？

Question

我需要制作简单的 jquery，它可以通过 Id 对许多对象起作用。

例如，如果我有这个 HTML:

<div id="all-ids">
   <div id="parent-id-1">
      <div id="1">
         <div></div>
         <div></div>
         <div></div>
      </div>
   </div>
   <div id="parent-id-2">
      <div id="2">
         <div></div>
         <div></div>
         <div></div>
      </div>
   </div>
   <div id="parent-id-3">
      <div id="3">
         <div></div>
         <div></div>
         <div></div>
      </div>
   </div>
   ...
</div>

现在，如果我需要为此执行点击功能，我会这样做:

$(document).on("click","#parent-id-1",function() {
   $('#1').show();
});

$(document).on("click","#parent-id-2",function() {
   $('#2').show();
});

$(document).on("click","#parent-id-3",function() {
   $('#3').show();
});

有没有办法让上面的 Jquery 变得更简单，因为我有很多 div？ ...我的意思是这样的:

$(document).on("click","#parent-id-|ID-NUMBER|",function() {
   $('#|ID-NUMBER|').show();
});

所以这个代码甚至适用于 1000 个 id。

注意:|ID-NUMBER|都是#parent-id 中的内容，并且只是#id。

Answer 1

不要使用 ID，非常复杂且不可扩展。使用类来代替:

<div id="all-ids">
   <div class="parent">
      <div class="children">
         <div></div>
         <div></div>
         <div></div>
      </div>
   </div>
   <div class="parent">
      <div class="children">
         <div></div>
         <div></div>
         <div></div>
      </div>
   </div>
   <div class="parent">
      <div class="children">
         <div></div>
         <div></div>
         <div></div>
      </div>
   </div>
   ...
</div>

在 jQuery 中:

$(document).on("click",".parent",function() {
   $(this).find('.children').show();
});

您不需要更多，您可以编写数百万个 parent 及其 child 。