Question

我有两个.class元素和javascript代码，如下所示：

＆＃13;

$(document).ready(function() {
  $(".button").click(function() {
    $(".class-sub").show();
    // how to show .class-sub by button of this parent class
  });
});

＆＃13;

<div class="class1">
  <div>
    <a class="button">Click sub class1 class</a>
  </div>
  <br />
  <div class="class-sub" style="display:none">form class2</div>
</div>


<div class="class2">
  <div>
    <a class="button">Click sub class2 class</a>
  </div>
  <br />
  <div class="class-sub" style="display:none">form class2</div>

</div>

＆＃13;

如何通过单击其父类的按钮来显示.class-sub？我想点击.button并显示同一父母的.class-sub。

Answer 1

＆＃13;

$(document).ready(function() {
  $(".button").click(function() {
    $(this).parent().parent().find("div.class-sub").show();
    // how to show .class-sub by button of this parent class
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="class1">
  <div>
    <a class="button">Click sub class1 class</a>
  </div>
  <br />
  <div class="class-sub" style="display:none">form class2</div>
</div>


<div class="class2">
  <div>
    <a class="button">Click sub class2 class</a>
  </div>
  <br />
  <div class="class-sub" style="display:none">form class2</div>

</div>

＆＃13;

使用.parent() 2次到达父div并使用.find()找到目标div

Answer 2

首先，为.classX元素提供一个公共类，以便轻松找到它们 - 我在我的示例中使用了.class。您可以使用按钮单击处理程序中的closest()来检索它们，然后使用find()来获取相关的class-sub元素。试试这个：

＆＃13;

$(document).ready(function() {
    $(".button").click(function() {
        $(this).closest('.class').find(".class-sub").show();
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class class1">
    <div>
        <a class="button">Click sub class1 class</a>
    </div><br />
    <div class="class-sub" style="display: none">form class2</div>
</div>

<div class="class class2">
    <div>
        <a class="button">Click sub class2 class</a>
    </div><br />
    <div class="class-sub" style="display: none">form class2</div>
</div>

＆＃13;

另请注意，如果您希望在连续点击时显示/隐藏子元素，则可以使用toggle()代替show()。

你也可以使用链式parent()调用而不将class添加到父元素，但这将是非常脆弱的代码，因此被认为是不好的做法。

显示多个父div的子div

2 个答案: