将元素ID从PHP传递到Javascript [重复]答案

【问题标题】：Passing an element id from PHP to Javascript [duplicate]将元素ID从PHP传递到Javascript [重复]
【发布时间】：2015-02-28 19:05:21
【问题描述】：

我有一些来自我的 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 时，它将执行一些功能，例如显示或隐藏

谢谢。

【问题讨论】：

到目前为止，您为完成这项任务做了哪些尝试？您的解决方案出了什么问题？

标签： javascript php foreach

【解决方案1】：

感谢所有参与者

但特别感谢@david 和@deacs

我已经得到它的工作如下

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

});

【讨论】：

【解决方案2】：

您没有名为"expand" 的id，您有这个：

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

假设$row['student_id'] 不为空（并且它不应该是，至少对于多条记录，因为ids 需要是唯一的），那么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');
});

【讨论】：

感谢大卫，您的回答有效，但它仅显示/隐藏第一个隐藏行。不是其他的。你能告诉如何显示/隐藏相对于单击按钮的元素
@BWCreativePanipat：与那个按钮相关的那个元素在哪里？有很多 jQuery 选择器/函数用于遍历 DOM 以定位特定元素。您当前的选择器基于id，因此它只能定位一个元素，因为ids 必须是唯一的。
当用户点击expand1 id时会显示dev1 id，当点击expand2 id时会显示dev2 id。
@BWCreativePanipat：我已经更新了答案。如果id 元素将始终遵循已知文本部分后跟相同数字部分的相同模式，那么一些快速字符串操作可以完成这项工作，而无需更改标记。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

为元素添加一个属性。

<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.
});

【讨论】：