Передача id элемента с PHP на Javascript

Question

У меня есть данные из моей базы данных mysql. Я показываю, что данные в таблице, используя цикл Еогеасп, как показано ниже

<table> 
foreach($students as $row):?> 
     <tr><td><i id="expand<?php echo $row['student_id'];?>" class="myclass fa fa-plus-square"></i></td> 
     <td><?php echo $i; $i++;?></td> 
      <td><?php echo $row['roll'];?></td> 
      <td style="text-align:center;"><img src="<?php echo $this->crud_model->get_image_url('student',$row['student_id']);?>" class="img-circle" width="50" /></td> 
      <td><?php echo $row['name'];?></td> 

      <td><?php echo $row['address'];?></td> 
      <td><?php echo $row['phone'];?></td></tr></table> 

Я также функцию событий нажмите на JavaScript, как показано ниже

$('#expand').click(function(){ 
    $('#dev').toggleClass('hidden'); 
}); 

Это я хочу, чтобы скрыть и показать на щелкнули события. Обратите внимание, что эта строка содержит данные студента, студент идентификатор $ строки [ «student_id»]

<tr id="dev<?php echo $row['student_id'];?>" class="hidden"> 
      <td colspan="7"> 
      <table> 
      <tr><td>Phone Number is <?php echo $row['phone'];?></td></tr> 
      </table> 
      </td> 
      </tr> 

Я хочу передать идентификатор элемента из PHP в Javascipt так, что при нажатии на ид расширить он будет выполнять некоторые функции, такие как показ или скрытие

Спасибо.

Answer 1

Вы не имеют id называется "expand", у вас есть это:

id="expand<?php echo $row['student_id'];?>" 

Предполагая $row['student_id'] не пусто (и это не должно быть, по крайней мере, в течение более чем одной записи, так как id с должны быть уникальными), то id не будет "expand". Это будет, однако начинаются с"expand". Таким образом, вы можете select on that:

$('[id^="expand"]').click(function(){ 
    // handle the click event here 
}); 

Это будет придавать тот же click обработчика каждый согласованный пункт, что любой элемент на странице, где id начинается с "expand". Обратите внимание, что обработчик будет делать то же самое для каждого из них, поэтому ваша текущая логика нацелена на один элемент (с id"dev"), чтобы переключить его видимость. Таким образом, в настоящее время каждый щелчок будет показывать/скрывать один и тот же элемент. Вы можете не хотеть точно, что функциональность, но это не полностью включено в вопрос. (Там нет #dev элемент в разметке, так что не совсем понятно, как вы хотите вести себя.)

Редактировать

Есть целый ряд способов для ориентации элемента, который вы хотите показать/скрыть. Не изменяя разметку, вы можете, возможно, всего лишь get the numeric portion of the id и использовать ее для построения цели id. Потенциально что-то вроде этого:

$('[id^="expand"]').click(function(){ 
    var idNumber = $(this).attr('id').replace(/expand/g, ''); 
    $('#dev'+id).toggleClass('hidden'); 
}); 

Answer 2

Добавить атрибут к элементу.

<i id="expand<?php echo $row['student_id'];?>" data-id="<?php echo $row['student_id'];?>" class="myclass fa fa-plus-square"></i> 

Функция вызова по классу не на id, так как существует несколько элементов.

$('.myclass').click(function(){ 
    var id = $(this).attr('data-id'); 
    $('#dev-'+id).toggleClass('hidden'); // apply proper logic here. 
}); 

Answer 3

Вы можете также использовать .myclass в селекторе, а затем удалить строку expand из id, которые извлекаются из attr():

$('.myclass').click(function(){ 
    var id = $(this).attr('id').replace('expand',''); 
    $('#dev'+id).toggleClass('hidden'); 
}); 

Answer 4

Благодаря всем участникам

Но особую благодарность @ david & @deacs

У меня есть работа как ниже

$('[id^="expand"]').click(function(){ 
var id = $(this).attr('data-id'); 
$('#dev'+id).toggleClass('hidden'); 

});