javascript - 动态更改帖子的内容(CMS)

Question

我正在尝试创建一个简单的 CMS。编辑帖子工作正常，但我正在努力如何切换您正在编辑的“当前”帖子(使用 ajax)。

我发现我可以为每个“概览”项(使用 css 隐藏)添加一个包含当前帖子 ID 的额外输入字段。

我在寻找什么(或其他解决方案):如果单击其中一个“overview-post-box”，使用 jquery/js 找到类为“post-id”的元素(当然在那个特定项目中).并向包含该 ID 的另一个页面发送 XHR 请求，这将返回放置在“编辑帖子”字段中的请求帖子。

欢迎提出任何想法!提前致谢!

<?php foreach($projects as $project){ ?>
    <a href="<?php echo $project['project_link'] ?>" class="overview-post-box">
        <div class="overview-post">
           <div class="post-id"><?php echo $project['project_id']; ?></div>
               <div class="title">
                   <?php echo $project['project_title']; ?>
               </div>
               <div class="content">
                  <?php echo substr($project['project_content'], 0, strpos($project['project_content'], ' ', 40)) ?>
               </div>
        </div>
   </a>
<?php }; ?>

Answer 1

有很多方法可以完成这个任务，特别是 VueJs 听起来像是完成这个任务的赢家，但对于 jQuery，我认为你可以做这样的事情。

1. 首先将您项目的 ID 附加到数据属性

<a data-id="<?php echo $project['project_id']; ?>" href="<?php echo $project['project_link'] ?>" class="overview-post-box">

2.- 绑定(bind) jQuery 处理程序以获取发布数据并更新您的表单元素。

$(document).ready(function(){
   $('.overview-post-box').click(function(event){
      event.preventDefault(); //Stop default <a> behavior 
      var id = $(this).data('id'); //get the current clicked post id
      //do an ajax request to fetch post data
      $.get('/getpostdata.php?id='+id,function(response){
       //return a json from your php side something like
       // {data: { title: 'post title', body: 'post body' }

      /* asign the json values to your inputs */
      $('your_input_class or id to the hidden id').val(id);
      $('your_input_class or id to the title').val(response.data.title);
      $('your_input_class or id to the body').val(response.data.body);
      }
   });
});