Question

我的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 展开时，它会执行一些功能，如显示或隐藏

感谢。

Answer 1

你没有id名为"expand"，你有这个：

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

假设$row['student_id']不是空的（并且它不应该是，至少对于多个记录，因为id需要是唯一的），那么{{ 1}}不会成为id。它，然而，以 "expand"开头。所以你可以select on that：

"expand"

这会将相同的$('[id^="expand"]').click(function(){ // handle the click event here });处理程序附加到每个匹配的项目，这是click以id开头的页面上的任何元素。请注意，处理程序将为每个处理程序执行相同的操作，因此您当前的逻辑以单个元素（"expand"为id）为目标来切换其可见性。因此，目前，每次点击都会显示/隐藏相同的元素。您可能不希望完全该功能，但问题并未完全包含在内。（标记中没有"dev"个元素，所以它并不完全清楚你希望它的行为方式。）

修改

有多种方法可以定位要显示/隐藏的元素。无需更改标记，您可能只需get the numeric portion of the id并使用它来构建目标#dev。可能是这样的：

id

Answer 2

感谢所有参与者

但特别感谢@david＆amp; @deacs

我的工作如下

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

});

Answer 3

为元素添加属性。

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

您还可以在选择器中使用.myclass，然后从expand中检索到的id中删除字符串attr()：

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

将元素id从PHP传递给Javascript

4 个答案: