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();
});

你不需要更多，你可以写出数百万的父母及其子女。

Answer 2

我认为应该有效：

[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();
});

Answer 3

您可以使用其他选择器。我想你实际上想点击元素而不是身体。我想这就是你想要的：

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

请注意，您无法使用数字启动HTML属性或JavaScript变量，包括ID。

Answer 4

您可以使用属性选择器选择id值以'parent-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>

如何为多个动作做简单的jquery？

4 个答案: