jQuery和foreach循环

Question

i have this code .. but with small problem .. i want to get some information about each module when i show the hidden tr .. i will get the information from the page {modules/$moduleid} .. i know how to use ajax .. but my problem is how to use the variable {$module.id} in the javascript code to give it the url of information page !

this is my code :

<script type="text/javascript">
$(document).ready(function(){

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

 $('.result').click(function(){  
 $(this).fadeOut(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 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 style="cursor: url;" 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 colspan="7">
RESULT
</td>
</tr>
{/foreach}
</table>
</div>
</body>
</html>

for example this is the code i use to get the subjects of each module :

 $.ajax({
   url: "../subjects/module_select/$module_id",
    type : "POST",
    data : dataAll,
    dataType :"html",
    success : function(msg){
       $('#select_subject').fadeIn(1000);
         $('#select_subject').html(msg)

    }

now how can i assign $module_id every time in the loop !

Answer 1

I think it's a mistake to not include the id in the table. Here I've added $module_id to the data-id attribute of a hidden div. This id is then assigned to moduleId , and you can then use that in your JS code any way you like.

#module_id { display: none; }

<div id="module_id" data-id="$module.id"></div>

var moduleId = $('#module_id').data('id');

$.ajax({
  url: "../subjects/module_select/" + moduleId
});

Even better would be to add it to the data-id attribute on the element that' catching your click event, whatever that is.

<tr data-id="$module.id" class="module-row">

$(document).on('click', '.module-row', function () {
  var moduleId = $(this).data('id');
  // Do ajax
});