我有一些来自 mysql 数据库的数据。我使用 foreach 循环在表中显示数据,如下所示
<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');
});
这是我想隐藏和显示点击事件。请注意,该行包含学生 ID 为 $row['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>
我想将元素 id 从 php 传递到 javascipt,以便当单击 id expand 时,它将执行一些功能,例如显示或隐藏
谢谢。
最佳答案
您没有名为“expand”
的id
,您有这个:
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');
});
关于javascript - 将元素 id 从 PHP 传递到 Javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27742336/