Weitere Elemente, die umschaltbar sind, aber ich möchte nur die anklicken, die ich angeklickt habe

Question

Wenn ich jetzt auf table a klicke, dass ich die .info im selben div umschalten möchte, schaltet es die .info in den anderen divs auch um. Kann mir bitte jemand helfen?

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

Das Problem ist, weil Sie alle .info Elemente sind die Auswahl vor toggle() aufrufen. Stattdessen müssen Sie den für die angeklickte a relevanten finden. Dazu können Sie das Schlüsselwort this im Click-Handler verwenden und das DOM durchlaufen, das übergeordnete Element .table abrufen und dann das nächste untergeordnete Element .info. Versuchen Sie folgendes:

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>

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