將動態生成的php變量傳遞給jquery函數

Question

我在<ul>中列出了正在根據mysql結果動態顯示的問題和答案（MCQ）。 之后，我提供了一個注釋部分，當用戶單擊每個問題所附的“添加注釋”時，該區域會打開。 我想通過為每個問題選擇相應的問題ID來保存為每個問題編寫的注釋。 我無法獲取與每個問題相關的特定問題ID。 根據我的代碼，所有問題id都顯示在console.log 。

<?php if( $row['section'] == 2) {?> 
<ul class="list-group">         
          <li class="list-group-item active">
           <div class="radio noMargin" id="<?php echo $sectionOne ; ?>info"><?php echo $no ; ?> <span class="glyphicon glyphicon-arrow-right"></span></div><?php echo "<font color='pink'>Ques ID :[".$row['id']."]</font>";?><div class="question"><?php echo $row['question'] ; ?></div>

          <div style="float:right; margin-top:-20px;">

          Marks:<?php echo $row['marks'] ; ?></div></li>
<?php          
echo '<input type="hidden" name="question[]" id="questionId" value="'.$row['id'].'">';
echo '<input type="hidden" name="attempt" value="'.$attemptCount.'">';
echo '<input type="hidden" name="unit_id" value="'.$unit_id.'">';
echo '<input type="hidden" name="chapter_id" value="'.$chapter_id.'">';

$questionId     =   $row['id'] ;  

$sqO =$db->query("SELECT id, options from tbl_options_mock_question WHERE question_id = ".$questionId."");
while($rowO=mysql_fetch_array($sqO))
{
?>  
    <li class="list-group-item wrp_radio">
      <div class="radio noMargin">
        <label>
          <input disabled type="radio" class="checkedInfo" alt="<?php echo $no ; ?>" name="optionAns<?php echo $i ; ?>" value="<?php echo $rowO['id'] ; ?>">
          <?php echo $rowO['options'] ; ?></label>
      </div>
    </li>
<?php } ?>
<br>   
 <a class="click_notes"> <font size='2' color='blue'>&nbsp;&nbsp;&nbsp;Add Notes</font></a> 
<br>
<div class="demo"></div>    
</ul>        
<?php $i++;$no++; ?>
<?php } ?>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var id = '<?php echo $row['id'] ; ?>';
console.log(id);
 $('.click_notes').on('click',function(){
  $('.comment_form').hide();
   $(this).closest('ul').find('.demo').html("<div class='comment_form'><form action='#' method='post'><textarea cols ='50' class='span10' name='notes' rows='6'></textarea><br><input class='btn btn-primary' name= 'submit_notes' type='submit' value='Add Notes'></form><br></div>");
 });
});
</script>

Answer 1

正如我在評論中解釋的那樣，將每個問題的ID一一對應地放在標簽的屬性中。 我對您的jQuery代碼進行了以下更改。

1）我使用jQuery的$(this).data('question-id);從標簽中選擇問題ID $(this).data('question-id); 。

2）然后我添加那個question_id的隱藏字段，以便您可以在提交表單后獲得相應的問題id。

<?php if( $row['section'] == 2) {?> 
<ul class="list-group">         
          <li class="list-group-item active">
           <div class="radio noMargin" id="<?php echo $sectionOne ; ?>info"><?php echo $no ; ?> <span class="glyphicon glyphicon-arrow-right"></span></div><?php echo "<font color='pink'>Ques ID :[".$row['id']."]</font>";?><div class="question"><?php echo $row['question'] ; ?></div>

          <div style="float:right; margin-top:-20px;">

          Marks:<?php echo $row['marks'] ; ?></div></li>
<?php          
echo '<input type="hidden" name="question[]" id="questionId" value="'.$row['id'].'">';
echo '<input type="hidden" name="attempt" value="'.$attemptCount.'">';
echo '<input type="hidden" name="unit_id" value="'.$unit_id.'">';
echo '<input type="hidden" name="chapter_id" value="'.$chapter_id.'">';

$questionId     =   $row['id'] ;  

$sqO =$db->query("SELECT id, options from tbl_options_mock_question WHERE question_id = ".$questionId."");
while($rowO=mysql_fetch_array($sqO))
{
?>  
    <li class="list-group-item wrp_radio">
      <div class="radio noMargin">
        <label>
          <input disabled type="radio" class="checkedInfo" alt="<?php echo $no ; ?>" name="optionAns<?php echo $i ; ?>" value="<?php echo $rowO['id'] ; ?>">
          <?php echo $rowO['options'] ; ?></label>
      </div>
    </li>
<?php } ?>
<br>   
 <a class="click_notes" data-question-id="<?=$rowO['id']?>"> <font size='2' color='blue'>&nbsp;&nbsp;&nbsp;Add Notes</font></a> 
<br>
<div class="demo"></div>    
</ul>        
<?php $i++;$no++; ?>
<?php } ?>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var id = '<?php echo $row['id'] ; ?>';
console.log(id);
 $('.click_notes').on('click',function(){
  var question_id =$(this).data('question-id);
  $('.comment_form').hide();
   $(this).closest('ul').find('.demo').html("<div class='comment_form'><form action='#' method='post'><input type='hidden' name='question_id' value='"+  +"'><textarea cols ='50' class='span10' name='notes' rows='6'></textarea><br><input class='btn btn-primary' name= 'submit_notes' type='submit' value='Add Notes'></form><br></div>");
 });
});
</script>