在表格中切换最接近的DIV

Question

我有一个带有复选框的表格，其中包含.toggle-extract类，点击后我希望它们能够将最近的DIV与班级名称切换.extract-years

现在我的代码应该可以工作，但它让我疯狂地试图找出它为什么不会触发。

这是JSFiddle示例。

$(document).ready(function() {
    $('.toggle-extract').on('click', function () {
        $(this).closest('div').find('.extract-years').toggle("fast");
    });
});

这是HTML

<table>
    <tr>
        <td>
            <input type="checkbox" class="toggle-extract">
        </td>
        <td>
            <div class="extract-years">Toggle Box</div>
        </td>
    </tr>        
    <tr>
        <td>
            <input type="checkbox" class="toggle-extract">
        </td>
        <td>
            <div class="extract-years">Toggle Box</div>
        </td>
   </tr>
</table>

Answer 1

您可以更改为

$(this).closest('tr').find('.extract-years').toggle("fast");

$(document).ready(function() {
  $('.toggle-extract').on('click', function() {
    $(this).closest('tr').find('.extract-years').toggle("fast");
  });
});

body {
  color: #000;
}
.extract-years {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="checkbox" class="toggle-extract">
    </td>
    <td>
      <div class="extract-years">Toggle Box</div>
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" class="toggle-extract">
    </td>
    <td>
      <div class="extract-years">Toggle Box</div>
    </td>
  </tr>
</table>

Fiddle

对于作为注释提到的第二个版本，

更新：，可以将select语句更改为例如。

$(this).closest('table').parent("td").next("td").
        find('.extract-years').toggle("fast");

调整后的Fiddle，以及此处的工作版本：

$(document).ready(function() {
  $('.toggle-extract').on('click', function() {
    $(this).closest('table').parent("td").next("td").find('.extract-years').toggle("fast");
  });
});

body {
  color: #000;
}
.extract-years {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <table class="inline-table-body">
        <tbody>
          <tr>
            <td>
              <input type="checkbox" class="toggle-extract">
            </td>
          </tr>
        </tbody>
      </table>
    </td>
    <td>
      <div class="extract-years">Toggle Box</div>
    </td>
  </tr>
  <tr>
    <td>
      <table class="inline-table-body">
        <tbody>
          <tr>
            <td>
              <input type="checkbox" class="toggle-extract">
            </td>
          </tr>
        </tbody>
      </table>
    </td>
    <td>
      <div class="extract-years">Toggle Box</div>
    </td>
  </tr>
</table>