javascript - 要切换更多元素，但我只想切换我单击的元素

Question

当我现在点击想要在同一 div 内切换 .info 的 table a 时，它会切换 .info在其他 div 中也是如此。有人可以帮我吗？

function info() {
  $('.table a').click(function() {
    $('.info').toggle();
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="table">
    <a class="table-row" title="mehr &darr;">
      <div class="table-cell l">
        19:30
      </div>
      <div class="table-cell">
        Eröffnung + <b>Nwabis Plaatjie</b>: 3 Years, a month and 7 days
      </div>
      <div class="table-cell r">
        Experimentiertheater
      </div>
    </a>
  </div>
  <div class="info">
    <h1>test</h1>
  </div>
</div>
<div>
  <div class="table">
    <a class="table-row" title="mehr &darr;">
      <div class="table-cell l">
        19:30
      </div>
      <div class="table-cell">
        Eröffnung + <b>Nwabis Plaatjie</b>: 3 Years, a month and 7 days
      </div>
      <div class="table-cell r">
        Experimentiertheater
      </div>
    </a>
  </div>
  <div class="info">
    <h1>test</h1>
  </div>
</div>

Answer 1

问题是因为您在调用 toggle() 之前选择了所有 .info 元素。相反，您需要找到与单击的 a 相关的内容。为此，您可以在点击处理程序中使用 this 关键字并遍历 DOM，检索父级 .table，然后检索下一个同级 .info。试试这个:

function info() {
  $('.table a').click(function() {
    $(this).closest('.table').next('.info').toggle();
  });
}

info();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="table">
    <a class="table-row" title="mehr &darr;">
      <div class="table-cell l">
        19:30
      </div>
      <div class="table-cell">
        Eröffnung + <b>Nwabis Plaatjie</b>: 3 Years, a month and 7 days
      </div>
      <div class="table-cell r">
        Experimentiertheater
      </div>
    </a>
  </div>
  <div class="info">
    <h1>test</h1>
  </div>
</div>
<div>
  <div class="table">
    <a class="table-row" title="mehr &darr;">
      <div class="table-cell l">
        19:30
      </div>
      <div class="table-cell">
        Eröffnung + <b>Nwabis Plaatjie</b>: 3 Years, a month and 7 days
      </div>
      <div class="table-cell r">
        Experimentiertheater
      </div>
    </a>
  </div>
  <div class="info">
    <h1>test</h1>
  </div>
</div>