Question

这是我想要做的。我有以下html显示来自db的项目。

<div class="col-md-5">
  <ul class="todo-projects-container">
     <li class="todo-padding-b-0">
        <div class="todo-head">
           <button class="btn btn-square btn-sm green todo-bold">Add Project</button>
           <h3>Projects</h3>
           <p>4 Waiting Attention</p>
        </div>
     </li>
     <?php foreach ($projects as $project): ?>
        <li class="todo-projects-item">
          <h3><?php echo $project->project_name ?></h3>
          <p><?php echo $project->project_body ?></p>
          <div class="todo-project-item-foot">
             <p class="todo-red todo-inline">Project #<?php echo $project->project_id ?></p>
             <p class="todo-inline todo-float-r">32 Members
               <a class="todo-add-button" href="#todo-members-modal" data-toggle="modal">+</a>
             </p>
          </div>
        </li>
        <div class="todo-projects-divider"></div>
     <?php endforeach; ?>
  </ul>
</div>

当我第一次加载页面时，第一个项目收到class =＆＃34; active＆＃34; （使用jquery）并且每当单击一个项目时，它将从前一个li中删除活动类并添加到单击的一个。到现在为止还挺好。

现在我需要显示以下内容：

<ul class="todo-tasks-content">
    <li class="todo-tasks-item">
        <h4 class="todo-inline">
          <a data-toggle="modal" href="#todo-task-modal">Welcome to the hotel California</a>
        </h4>
        <p class="todo-inline todo-float-r">Bob,
           <span class="todo-red">TODAY</span>
        </p>
     </li>
     <li class="todo-tasks-item">
        <h4 class="todo-inline">
           <a data-toggle="modal" href="#todo-task-modal">Talking 'bout my generation</a>
        </h4>
        <p class="todo-inline todo-float-r">Shane,
           <span class="todo-red">TODAY</span>
        </p>
     </li>
</ul>

在上面的html中，所有信息显然都是静态的。我知道如何进行ajax调用以从我的数据库中获取信息。我不知道该怎么办，只要点击一个项目，就会根据project_id显示相应的任务。

我假设我需要进行ajax调用并返回数据和一些html然后执行类似（伪语法）

 onclick(function() { 

   var tasksHTML = insert ajax call here 


 });

不确定这是否是正确的方法，我是js的新手。有什么建议吗？

更新：

这是一张图片：

在图片中，有一个活动（点击）项目，右边是具有该项目ID的任务。单击项目时如何更改任务列表？

Answer 1

首先，我们需要为javascript提供一种获取id的方法，以便将其传递给获取任务的PHP文件。

我假设您将JQuery点击绑定到<li>，因此还要包含数据属性并将其命名为projectid。或者在点击方法绑定的任何地方添加此数据属性。

<?php foreach ($projects as $project): ?>
        <li class="todo-projects-item" data-projectid="$project['id']">
          //.................
     <?php endforeach; ?>

如果您使用的是JQuery，请在.click方法中执行此操作

$('.todo-projects-item').click(function(){
        //Get your project id from the data-attribute
        projectId = $(this).data('projectid');

        //run your ajax        
        $.post('phpfile.php', {projectId:projectId}, function(r){
            //your phpfile.php should echo a json of the tasks
            //see example below
            $('.class-of-the-task-div').html(r.html);
        }, 'JSON');

});

你的php文件可能是这样的

$r['html'] = '<ul class="todo-tasks-content">
                  <li class="todo-tasks-item">
                  //....................Stuff
                  </li>
              </ul>';

echo json_encode($r);

显示基于id的内容（来自数据库，而不是html id）

1 个答案: