Question

我在动态生成的页面上列出了问题和选项（多项选择题）。我想将其提供给内容管理团队，如果他们发现有问题的错误，可以单击“注释”，并为该问题打开一个文本区域，然后他们可以编写该注释。因此，现在如果我单击一个问题，则文本区域将打开，但是如果我单击下一个问题的“注释”选项，则文本区域将在前一个问题的部分打开。我已经环顾四周，但是没有任何线索。请让我知道我要去哪里错了。

  <？php if（$ row ['section'] == 1）{？>


 info”> <？php echo $ no; ？>   
 <？php echo“  Ques ID：[”。$ row ['id']。 “] ”;？>  <？php echo $ row ['question']; ？> 

  注释 


标记：<？php echo $ row ['marks']; ？> 
 
<？php
回声'';
回声'';
回声'';
回声'';

$ questionId = $ row ['id'];

$ sqO = $ db-> query（“ SELECT id，tbl_options_mock_question中的选项，其中question_id =”。$ questionId。“”）；
while（$ rowO = mysql_fetch_array（$ sqO））
{
？>
    
      
        <标签>
          ” name =“ optionAns <？php echo $ i;？>” value =“ <？php echo $ rowO [ 'id'];？>“>
          <？php echo $ rowO ['options']; ？> 
      
    

<？php}？>




 
<？php $ i ++; $ no ++; ？>

<？php}？>

Answer 1

由于已在其中添加了jQuery标记，因此我将提供一个jquery解决方案：-

1。将<div id="demo"></div>转换为<div class="demo"></div>并将其放入<ul></ul>

2。从div中删除onclick并在该div上添加类click_notes

3。添加jquery库并使用以下代码

$(document).ready(function(){
 $('.click_notes').on('click',function(){
   $('.comment_form').hide(); //hide show form
   $(this).closest('ul').find('.demo').html("<div class='comment_form'><form action='#' method='post'><textarea class='span10' name='Comment' rows='6'></textarea><br><input class='btn btn-primary' type='submit' value='Reply'></form></div>");
 });
});

示例代码段：-

$(document).ready(function(){
 $('.click_notes').on('click',function(){
   $('.comment_form').hide();//hide show form
   $(this).closest('ul').find('.demo').html("<div class='comment_form'><form action='#' method='post'><textarea class='span10' name='Comment' rows='6'></textarea><br><input class='btn btn-primary' type='submit' value='Reply'></form></div>");
 });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-group">
  <li class="list-group-item active">Ques ID :1<div class="question">Q1</div><div style="float:right; margin-top:-20px;"><div class="click_notes"> <font color='yellow'>Notes</font></div>Marks:5</div>
  </li>
  <li class="list-group-item wrp_radio">
    <div class="radio noMargin"><label><input disabled type="radio" class="checkedInfo" alt="1"  name="optionAns1"  value="1">1</label></div>
  </li>
  <li class="list-group-item wrp_radio">
    <div class="radio noMargin"><label><input disabled type="radio" class="checkedInfo" alt="2"  name="optionAns2"  value="1">2</label></div>
  </li>
  <li class="list-group-item wrp_radio">
    <div class="radio noMargin"><label><input disabled type="radio" class="checkedInfo" alt="3"  name="optionAns3"  value="1">3</label></div>
  </li>
  <li class="list-group-item wrp_radio">
    <div class="radio noMargin"><label><input disabled type="radio" class="checkedInfo" alt="4"  name="optionAns4"  value="1">4</label></div>
  </li>
  <div class="demo"></div>
</ul>
<ul class="list-group">
  <li class="list-group-item active">Ques ID :2<div class="question">Q2</div><div style="float:right; margin-top:-20px;"><div class="click_notes"> <font color='yellow'>Notes</font></div>Marks:5</div>
  </li>
  <li class="list-group-item wrp_radio">
    <div class="radio noMargin"><label><input disabled type="radio" class="checkedInfo" alt="1"  name="optionAns1"  value="1">1</label></div>
  </li>
  <li class="list-group-item wrp_radio">
    <div class="radio noMargin"><label><input disabled type="radio" class="checkedInfo" alt="2"  name="optionAns2"  value="1">2</label></div>
  </li>
  <li class="list-group-item wrp_radio">
    <div class="radio noMargin"><label><input disabled type="radio" class="checkedInfo" alt="3"  name="optionAns3"  value="1">3</label></div>
  </li>
  <li class="list-group-item wrp_radio">
    <div class="radio noMargin"><label><input disabled type="radio" class="checkedInfo" alt="4"  name="optionAns4"  value="1">4</label></div>
  </li>
  <div class="demo"></div>
</ul>

Answer 2

此部分：

<div id="demo"></div>         
<?php $i++;$no++; ?>
<?php } ?>

将使用id=demo创建多个div，因此当您使用document.getElementById("demo")时，它只会获得第一个。

使用类而不是ID，然后使用相对导航获取相关的类。

保留onclick=并使用jquery（按照标签）将变为：

<div onclick= "myFunction(this)">

function myFunction(el) {
    $(el).closest(".list-group-item").find(".demo").html("<div class='comment_form...

在动态生成的每个内容上显示<textarea>

2 个答案: