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

问题描述

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

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

我将不胜感激有关如何使它们按模态显示以及如何使它们独一无二的方向。我假设我回显 $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>

更新：

随着收到的回复，我做了一些更改并注意到，即使评论表单在所有模式上都可见，但发布的评论本身只出现在第一个模式上。通过一些硬编码，我可以看出 html 和脚本中的 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")            
        },

标签： javascriptphpajax

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

问题描述

解决方案

推荐阅读