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

【问题标题】：More elements to be toggled, but I only want to toggle the one i clicked on更多元素要切换，但我只想切换我点击的那个
【发布时间】：2017-10-15 16:21:47
【问题描述】：

当我现在单击一个table a 时，我想在同一个div 中切换.info，它也会在其他div 中切换.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>

【问题讨论】：

标签： javascript jquery html click toggle

【解决方案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>

【讨论】：

【解决方案2】：

$('.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>

【讨论】：

对问题/解决方案的描述将有助于教育 OP 以应对未来的案例