更多要切换的元素，但我只想切换我点击的那个

Question

当我现在单击一个 table a，我想在同一个 div 中切换 .info，它会切换另一个 [=23] 中的 .info =]也是。有人可以帮我吗？

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

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

.info {
  display: none;
}

<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 2

问题是因为您在调用 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>

更多要切换的元素，但我只想切换我点击的那个

More elements to be toggled, but I only want to toggle the one i clicked on

html

javascript

jquery

click

toggle