每个动态模式的唯一评论部分

Question

我有一个网页，其中包含动态加载的卡片，这些卡片会弹出到单独的模式中以显示更多数据。这些模态框都有其唯一的 id，以便弹出正确的。

我正在尝试为每个模式放置一个独特的评论部分。我所实施的仅适用于第一个模态，甚至不显示第二个模态的 cmets。

对于如何使它们按模态显示以及如何使它们独一无二的一些方向，我将不胜感激。我假设我回显 $test[id] 就像我用于模态一样。在脚本方面需要一点帮助。

 <div id="myModal<?php echo $test['id']; ?>" class="modal">
    <div class="modal-content">
<div class="container">
   <form method="POST" id="comment_form">
   <input type="hidden" id="id" name="id" value="<?php echo $test['id']; ?>">
    <div class="form-group">
     <input type="text" name="comment_name" id="comment_name" class="form-control" placeholder="Enter Name" />
    </div>
    <div class="form-group">
     <textarea name="comment_content" id="comment_content" class="form-control" placeholder="Enter Comment" rows="5"></textarea>
    </div>
    <div class="form-group">
     <input type="hidden" name="comment_id" id="comment_id" value="0" />
     <input type="submit" name="submit" id="submit" class="btn btn-info" value="Submit" />
    </div>
   </form>
   <span id="comment_message"></span>
   <br />
   <div id="display_comment<?php echo $test['id']; ?>"></div>
  </div>
</div>
</div>

<script>
 var data = 1;
$(document).ready(function(){

 $('#comment_form').on('submit', function(event){
  event.preventDefault();
  var form_data = $(this).serialize();
  $.ajax({
   url:"add_comment.php",
   method:"POST",
   data:form_data,
   dataType:"JSON",
   success:function(data)
   {
    if(data.error != '')
    {
     $('#comment_form')[0].reset();
     $('#comment_message').html(data.error);
     $('#comment_id').val('0');
     load_comment();
    }
   }
  })
 });

 load_comment();

 function load_comment()
 {
  $.ajax({
   url:"fetch_comment.php",
   method:"POST",
   success:function(data)
   {
    $('#display_comment').html(data);
   }
  })
 }
 $(document).on('click', '.reply', function(){
  var comment_id = $(this).attr("id");
  $('#comment_id').val(comment_id);
  $('#comment_name').focus();
 });

});
</script>

更新：

根据收到的回复，我进行了一些更改并注意到即使评论表单在所有模式上都可见，但发布的 cmets 本身 仅出现在第一个模态上。通过一些硬编码，我可以看出 html & script 中的 display_comment(id) 需要相同。 HTML id 根据控制台更新，但我无法将正确的 id 传递给 $('#display_comment'+myData1).html(data); （始终为 1）。

<div id="myModal<?php echo $test['id']; ?>" class="modal">
    <div class="modal-content">
<div class="container">
   <form method="POST" id="comment_form">
   <input type="hidden" id="id" name="id" value="<?php echo $test['id']; ?>">
    <div class="form-group">
     <input type="text" name="comment_name" id="comment_name" class="form-control" placeholder="Enter Name" />
    </div>
    <div class="form-group">
     <textarea name="comment_content" id="comment_content" class="form-control" placeholder="Enter Comment" rows="5"></textarea>
    </div>
    <div class="form-group">
     <input type="hidden" name="comment_id" id="comment_id" value="0" />
     <input type="submit" name="submit" id="submit" class="btn btn-info" value="Submit" />
    </div>
   </form>
   <span id="comment_message"></span>
   <br />
   <div id="display_comment<?php echo $test['id']; ?>"></div>
  </div>
<div id="dom-target" style="display: none;" data-id="<?php echo htmlspecialchars($test['id']);?>">
    <?php       
    echo htmlspecialchars($test['id']);
    ?>
</div>
</div>

<script>
$(document).ready(function(){
 $('#comment_form').on('submit', function(event){
  event.preventDefault();
  var form_data = $(this).serialize();
  $.ajax({
   url:"add_comment.php",
   method:"POST",
   data:form_data,
   dataType:"JSON",
   success:function(data)
   {
    if(data.error != '')
    {
     $('#comment_form')[0].reset();
     $('#comment_message').html(data.error);
     $('#comment_id').val('0');
     load_comment();
    }
   }
  })
 });

 load_comment();
 function load_comment()
 {
var myData1 = $("#dom-target").data("id");
console.log('#display_comment'+myData1);
  $.ajax({
   url:"fetch_comment.php",
   method:"POST",
   success:function(data)
   {
    $('#display_comment'+myData1).html(data);
   }
  })
 }
 $(document).on('click', '.reply', function(){
  var comment_id = $(this).attr("id");
  $('#comment_id').val(comment_id);
  $('#comment_name').focus();
 });
});
</script>

我也尝试了以下方法，只是在控制台中接收 undefined 作为 myData2 的值：

$.ajax({
   url:"fetch_comment.php",
   method:"POST",
   data: {
          myData2: $("#dom-target").data("id")            
        },

Answer 1

你应该根据你的 $test['id'] 循环所有的内容。 每个循环都会生成每个 $test['id'], modals, form。

因此，根据每个模态，您将有多种形式。

关于输入框的名称（name="comment_id","comment_name" 等），只需使用相同的名称，因为这会影响您的后端处理这些输入的方式 ($_POST['']) .

如果您使用与用户相同的输入名称，则这应该不是问题，因为用户在每个请求中只能提交 1 个表单。

只是值会根据表单而改变。