Question

如果点击“加号”类，则会显示所有隐藏的行。

默认情况下，它们是隐藏的。

如何点击特定年份，将显示该年份的月份。

使用以下代码，点击后即可显示所有代码。

<cfoutput query="getdates" group="year">
  <thead>
    <tr>
      <th> <span class="plus">+</span> #year#</th>
    </tr>
  </thead>
  <cfif dtToday gte combineDates>
    <tbody class="closeAction">
      <cfoutput>
        <tr>
          <td><a href=""> #month#  </a></td>
        </tr>
      </cfoutput>
    </tbody>
  </cfif>
</cfoutput>

<style>
  .closeAction {
    display: none;
  }
</style>

<script>
  $(".plus").click(function() {
    //$('.plus',this).html('-');
    $(".closeAction").removeClass("closeAction");
  })
</script>

这是点击之前的样子：

Answer 1

$(".closeAction")在DOM中找到这个类的所有元素，这就是为什么它们都打开了。您希望找到与此类相关联的此类的元素。使用this，您可以向上移动DOM，并从事件的上下文开始查找该类的元素。 this是click事件的上下文，事件附加到的元素是加号。

$(this).closest('thead').next().find('.closeAction').removeClass("closeAction");

这会向上移动到最接近的thead元素，获取下一个元素并查找其中包含closeAction类的所有元素。

如果您可以展示一个包含更多HTML的示例，则此代码最有可能得到改进，但由于我们只使用了plus和closeAction的单个示例，因此很难知道它的外观。

Answer 2

使用closest()并在next()之后（转到父级，然后使用提供的类名搜索下一个元素）。

另外，为什么请注意在close的adition中添加closeAction课程，然后使用toggleClass打开/关闭日期：

这是一个有效的 fiddle

Snippet

$(".plus").click(function () {
    $(this).closest('thead').next('.closeAction').toggleClass('closed');
})

.closed {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr >
      <th> <span class="plus">+</span> 2015</th>
    </tr>
  </thead>
  <tbody  class="closeAction closed">
    <tr>
      <td><a href="#"> Jan </a></td>
    </tr>
    <tr>
      <td><a href="#"> Feb  </a></td>
    </tr>
    <tr>
      <td><a href="#"> Mar  </a></td>
    </tr>
  <thead>
    <tr >
      <th> <span class="plus">+</span> 2016</th>
    </tr>
  </thead>
  <tbody  class="closeAction closed">
    <tr>
      <td><a href="#"> #month#  </a></td>
    </tr>
    <tr>
      <td><a href="#"> Jan </a></td>
    </tr>
    <tr>
      <td><a href="#"> Feb  </a></td>
    </tr>
    <tr>
      <td><a href="#"> Mar  </a></td>
    </tr>
  <thead>
    <tr >
      <th> <span class="plus">+</span> 2017</th>
    </tr>
  </thead>
  <tbody  class="closeAction closed">
    <tr>
      <td><a href="#"> Jan </a></td>
    </tr>
    <tr>
      <td><a href="#"> Feb  </a></td>
    </tr>
    <tr>
      <td><a href="#"> Mar  </a></td>
    </tr>
  </tbody>
</table>

Answer 3

您正在做的事情会考虑课程closeAction的所有元素。你需要触发下一个。因此，您可以使用next()

<script>
$(".plus").click(function () {
//$('.plus',this).html('-');
    $(this).next(".closeAction").removeClass("closeAction");
})
</script>

Answer 4

.closeAction和cfoutput元素似乎共享相同的cfoutput元素，因此您可以遍历最近的.closeAction元素，然后从那里找到{{ 1}}元素。

$(".plus").click(function () {
  $(this).closest("cfoutput").find('.closeAction').removeClass("closeAction");
})

单击另一个类时如何删除/添加类？

4 个答案: