javascript - 如何在 JQuery 中使用 foreach 循环

Question

我正在尝试使用 smarty 模板和 foreach 循环来显示表中的数据列表..但我想赋予 id 在每个下面显示新数据的能力..但它仅适用于第一个

问题是带有id(主题)的img，我想每次单击img时显示id(结果)..但它仅适用于第一行..我怎样才能使其适用于所有行？ ？

<script type="text/javascript">
$(document).ready(function(){    
$('#subjects').click(function(){  
$('#result').fadeIn(2000);
});
});
</script>

<br /><br /><table width="100%">
<tr class="tbl">
<td colspan="6">{$ci->lang->line('modules_list')}</td>
</tr><tr>
<td class="tbl1" style="width: 8%;">{$ci->lang->line('number')}</td>
<td class="tbl2" style="width: 28%;">{$ci->lang->line('title')}</td>
<td class="tbl1" style="width: 10%;">{$ci->lang->line('add_subject')}</td>
<td class="tbl2" style="width: 10%;">{$ci->lang->line('subjects_list')}</td>
<td class="tbl1" style="width: 8%;">{$ci->lang->line('edit')}</td>
<td class="tbl2" style="width: 8%;">{$ci->lang->line('delete')}</td>
</tr>
{foreach $modules_list as $module}
<tr>
<td class="tbl1" style="width: 8%;">{$module.number}</td>
<td class="tbl2" style="width: 28%;">{$module.title}</td>
<td class="tbl1" style="width: 10%;"><a href="{base_url('admincp/subjects/add')} /{$module.id}"><img src="{base_url('images/icons/add.png')}" /></a></td>
<td class="tbl2" style="width: 10%;"><img id="subjects" src="{base_url('images/icons/list.png')}" /></td>
<td class="tbl1" style="width: 8%;"><a href="{base_url('admincp/modules/edit')}/{$module.number}"><img src="{base_url('images/icons/edit.png')}" /></a></td>
<td class="tbl2" style="width: 8%;"><a onclick="return confirm('{$ci->lang->line('delete_confirm_msg')}')" href="{base_url('admincp/modules/delete')}/{$module.number}"><img src="{base_url('images/icons/delete.gif')}" /></a></td>
</tr>
<tr id="result" style="display:none">
<td>RESULT</td>
</tr>
{/foreach}
</table>
</div>
</body>
</html>

==

我已经解决了这个问题，它现在可以工作了，但是我还有另一个小问题，当我显示隐藏的 tr 时，我想使用 aJax 从另一个页面获取有关每个 moduke 的一些信息..我希望它获取一些数据从页面(modules/$module_id)..我知道如何使用ajax..但是我如何在javascript代码中使用变量{$module_id}？

Answer 1

您应该为结果和主题使用class，否则您将获得重复的id属性将使您的页面无效。另外，为每个模块 tr 添加一个类，以便可以轻松识别。试试这个:

{foreach $modules_list as $module}
    <tr class="module-row">
        <td class="tbl1" style="width: 8%;">{$module.number}</td>
        <td class="tbl2" style="width: 28%;">{$module.title}</td>
        <td class="tbl1" style="width: 10%;"><a href="{base_url('admincp/subjects/add')} /{$module.id}"><img src="{base_url('images/icons/add.png')}" /></a></td>
        <td class="tbl2" style="width: 10%;"><img class="subjects" src="{base_url('images/icons/list.png')}" /></td>
        <td class="tbl1" style="width: 8%;"><a href="{base_url('admincp/modules/edit')}/{$module.number}"><img src="{base_url('images/icons/edit.png')}" /></a></td>
        <td class="tbl2" style="width: 8%;"><a onclick="return confirm('{$ci->lang->line('delete_confirm_msg')}')" href="{base_url('admincp/modules/delete')}/{$module.number}"><img src="{base_url('images/icons/delete.gif')}" /></a></td>
    </tr>
    <tr class="result" style="display:none">
        <td>RESULT</td>
    </tr>
{/foreach}

$('.subjects').click(function() {  
    var $tr = $(this).closest('tr');
    $tr.nextUntil('.module-row').fadeIn(2000);
});