要切换的元素越多，但我只想切换我点击的元素

Question

当我现在点击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>

Answer 1

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

@javax.persistence.Transient
public boolean isRecordKeeperConfigsNotEmpty() {
    return getRecordKeeperConfigs() != null && !getRecordKeeperConfigs().isEmpty();
}

Answer 2

问题是因为您在调用.info之前选择了所有toggle()元素。相反，您需要找到与点击的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>