如何为多个操作执行简单的 jQuery

how to do simple jquery for multiple actions?

本文关键字：执行 简单 jQuery 操作      更新时间：2023-09-26

>我需要通过 Id 制作简单的 jquery 来对许多对象起作用。

例如，如果我有这个 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。

注：该 |身份证号码|既是 #parent id 中，又是 #id。

不要使用 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();
});

你不需要更多，你可以写数百万的父母和它的孩子。

您可以使用不同的选择器。我认为您实际上想单击元素而不是正文。我想这就是你想要的：

$('[id^=parent-id]').each(function(i, e){
  var el = $(e);
  el.click(function(){
    el.children(':first').show();
  });
});

请注意，HTML 属性或 JavaScript 变量不能以数字（包括 id）开头。

您可以使用属性选择器来选择具有以"parent-id-"开头的 id 值的元素。

$(document).on("click", "[id^=parent-id-]", function(e) {
  alert($(this).attr("id").replace("parent-id-", ""));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="all-ids">
  <div id="parent-id-1">
    <div id="1">
      <div>Lorem</div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div id="parent-id-2">
    <div id="2">
      <div>Ipsum</div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div id="parent-id-3">
    <div id="3">
      <div>Dolor</div>
      <div></div>
      <div></div>
    </div>
  </div>
  ...
</div>

我认为这应该有效：

[1, 2, 3].forEach(function(index) {
  $(document).on("click","#parent-id-" + index,function() {
     $('#' + index).show();
  });
});

或者，如果您不想同时命名两个div，则可以使用 > 指向父div的直接子级，或者编写另一个选择器。要实现这一目标，您可以做到：

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

在 JavaScript 中：

$(document).on("click",".parent",function() {
   $(this).find('>div').show();
});
相关文章：