Identität der angeklickten ID

Question

Ich verwende PHP Codeigniter. Ich sende Daten in einem Array zu meiner Ansicht. Aus meiner Sicht habe ich eine foreach-Schleife, die durch das Array iteriert und die Daten in meiner Ansicht anzeigt. Auch in dieser Foreach-Schleife zeige ich einige Aktionsknöpfe an.

<?php 
    foreach($studentList as $r) 
     { 
     echo '<tr>'; 
     echo $r->id; 
     echo '</tr>'?> 
    <a class="lock" data-id="<?= $r->id?>_lock" data-placement="top" data-original-title="Lock Profile" href="javascript:void(0)"><i class="clip-locked"></i></a> 
    <a class="hidden unlock" data-id="<?= $r->id?>_unlock" data-placement="top" data-original-title="Unlock Profile" href="javascript:void(0)"><i class="clip-unlocked"></i></a> 
<?php 
     } ?> 

Was ich tun möchte, ist die Verriegelungstaste standardmäßig angezeigt werden, wenn jemand auf diese Schaltfläche klickt Sperre sollte versteckt und entsperren bekommen Taste sollte angezeigt bekommen. In meiner JQuery mache ich das so, aber das Klicken auf eine einzelne Schaltfläche ermöglicht das Ändern der Schaltflächen auf der ganzen Seite. Ich kenne den Grund, wie ich auf das Element unter Verwendung der Klasse zugreife, die alle gemeinsam haben, aber ich habe noch nicht herausgefunden, wie man das macht, das ID verwendet, das einzelne Elemente berücksichtigt.

$('.unlock').click(function() { 
 
    var id = $(this).attr("data-id"); 
 
    console.log(id); 
 
    $('.unlock').addClass("hidden"); 
 
    $('.lock').removeClass("hidden"); 
 
});

Answer 1

Diese geringfügige Änderung sollte Ihnen helfen.

$('.unlock').click(function(){ 
     var id = $(this).attr("data-id").split('_')[0]; 
     console.log(id); 
     $(this).addClass("hidden"); 
     $('[data-id='+id+'_unlock]').removeClass("hidden"); 
    }); 

Answer 2

OK, also zunächst einmal, sind Sie die Anker außerhalb der <tr> ‚s setzen. Ist das beabsichtigt?

Wenn Sie Code wie dieses:

<?php 
    foreach($studentList as $r) 
     { 
     echo '<tr>'; 
     echo $r->id;?> 
    <a class="lock" data-id="<?= $r->id?>_lock" data-placement="top" data-original-title="Lock Profile" href="javascript:void(0)"><i class="clip-locked"></i></a> 
    <a class="hidden unlock" data-id="<?= $r->id?>_unlock" data-placement="top" data-original-title="Unlock Profile" href="javascript:void(0)"><i class="clip-unlocked"></i></a> 
<?php 
     echo '</tr>'; 
     } ?> 

Sie können einfach tun:

$('.unlock').click(function(){ 
      var id = $(this).attr("data-id"); 
      console.log(id); 
      $(this).parent('tr').find('.unlock').addClass("hidden"); 
      $(this).parent('tr').find('.lock').removeClass("hidden"); 
     }); 

haben auch einen Blick here auf Informationen darüber, wie Geschwister zu holen, als Alternative die lokalisieren Element, nach dem Sie suchen.

Answer 3

Zunächst ist Ihr HTML semantisch falsch, tr sollte th oder td enthalten, je nachdem, was Sie tun möchten. Auch wenn der Browser sich nicht für schlechtes HTML beschwert, heißt das nicht, dass es korrekt ist. Also, das ist, was ein empfehlen:

Angenommen wir haben dieses

<table id="myTable"> 
    <tbody> 
    <?php foreach($studentList as $r) { ?> 
     <?php echo '<tr><td>'; ?> 
     <?php echo $r->id; ?> 
     <a class="lock" data-id="<?= $r->id?>_lock" data-placement="top" data-original-title="Lock Profile" href="javascript:void(0)"><i class="clip-locked"></i></a> 
     <a class="hidden unlock" data-id="<?= $r->id?>_unlock" data-placement="top" data-original-title="Unlock Profile" href="javascript:void(0)"><i class="clip-unlocked"></i></a> 
     <?php echo '</td></tr>'; ?> 
    <?php } ?> 
    </tbody> 
</table> 

Bind ein einzelnes Ereignis für beide Anker:

$("#myTable tr a").click(function(){ 
    //save the element for future reference and avoid repeat $(this) 
    var elm = $(this), 
     id = elm.attr("data-id"), 
     elmtoShow = elm.hasClass('unlock') ? '.lock' : '.unlock'; 

    console.log(id); 

    elm.addClass("hidden"); 

    //we can pass a second param to jQuery to query into 
    //that single element instead the whole document 
    $(elmtoShow, this.parentNode).removeClass("hidden"); 
}); 

Bitte beachten Sie, dass ich eine id der Tabelle hinzugefügt, um Machen Sie die Abfrage an alle Anker, lesen Sie auch die Kommentare im Code. Hoffe, es hilft