Идентификатор щелкнутого идентификатора

Question

Я использую php codeigniter. Я отправляю данные в массив к моему представлению. На мой взгляд, у меня есть цикл foreach, который выполняет итерацию через массив и отображает данные в моем представлении. Также внутри этого цикла foreach я показываю некоторые кнопки действий.

<?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 
     } ?> 

Что я хочу сделать, чтобы отобразить кнопку блокировки по умолчанию, когда кто-то нажимает на эту кнопку блокировки должны получить скрытые и разблокировать кнопки должны получить отображается. в моем jquery я делаю это так, но нажатие на одну кнопку позволяет сменить кнопки на всей странице. Я знаю причину, поскольку я обращаюсь к элементу с использованием класса, который у всех из них распространен, но я еще не понял, как это сделать, используя id, который будет учитывать отдельные элементы.

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

Answer 1

Это небольшое изменение должно помочь вам.

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

КИ, так что прежде всего, вы кладете якорь за пределами <tr> лет. Это предназначено?

Если у вас есть такой код:

<?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>'; 
     } ?> 

Вы можете просто сделать:

$('.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"); 
     }); 

также посмотреть here на информацию о том, как принести братьев и сестер, как альтернативный способ, чтобы найти который вы ищете.

Answer 3

Прежде всего, ваш html семантически неправильно, tr должен содержать th или td в зависимости от того, что вы хотите сделать. Даже когда браузеры не жалуются на плохой html, это не значит, что это правильно. Таким образом, это то, что рекомендуют:

Предположив мы имеем этот

<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 одно событие для обоих якорей:

$("#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"); 
}); 

Пожалуйста, обратите внимание, что я добавил id к столу сделать запрос ко всем якорям, а также прочитать комментарии в коде. Надеюсь, это поможет