Question

首先让我声明我的foreach循环没有任何问题，使用json或我的ajax函数发送数据。

我遇到的问题是使所有填充的.projectCont正常显示。

背景：用户单击列表项之一以显示刚选择的类别的图像。我正在运行查询以从该类别中提取所有图像。然后，显然，我希望所有图像都出现在屏幕上。

问题：我目前面临两种情况。

1。

不良-如果我将每个功能（$('#projectsWrap').prepend(this.html);的以下内容更改为（$('#projectsWrap').html(this.html);）-那么仅显示其中一张图像（但是我的控制台日志语句仍然输出所有查询的项目...不止一个。

好-每当我单击一个新列表项时，现有列表项就会消失，并且会出现新的单击列表项。

2。

不良-基本上与上面的相反。在代码处于当前状态的情况下（使用prepend），如果我单击新的类别列表项，则不会删除现有的查询图像。我尝试添加以下代码来解决此问题，但似乎只能删除一个图像。 $('#projectsWrap').find('.projectCont').prev().siblings().remove();

好-显示所有查询的图像。

有人知道我如何更改我的JS，以使所有查询的图像按类别显示，然后在选择另一个列表项并仅显示那些类别图像时删除现有的类别图像？

HTML

<ul>
    <li class="categoryList" data-category="Linear Motion">Linear Motion</li>
    <li class="categoryList" data-category="Structures">Structures</li>
    <li class="categoryList" data-category="Guarding">Guarding</li>
    <li class="categoryList" data-category="Enclosures">Enclosures</li>
    <li class="categoryList" data-category="Material Handling">Material Handling</li>
    <li class="categoryList" data-category="Workstations">Workstations</li>
    </ul>
    <div id="projectsWrap"></div>

JS

var displayProjects = JSON.parse(data);
$(displayProjects).each(function() {
    $('#projectsWrap').find('.projectCont').prev().siblings().remove();
    $('#projectsWrap').prepend(this.html);
    console.log(this.html);

}）;

PHP

if ($projects_stmt = $con->prepare($projects_sql)) {
        $projects_stmt->execute();
        $project_rows = $projects_stmt->fetchAll(PDO::FETCH_ASSOC);
        $proj_arr = array();
        foreach ($project_rows as $project_row) {
            $project_img = $project_row['p_img'];
            $project_alt = $project_row['p_alt'];
            $project_display_img = '<img src="'.$project_img.'" alt="'. $project_alt .'">';
            $project_title = $project_row['p_name'];
            $html = '';
            $html .= '<div class="projectCont">';
            $html .= $project_display_img;
            $html .= '<div class="projectInfo">';
            $html .= '<span class="projectTitle">' . $project_title . '</span>';
            $html .= '</div>';
            $html .= '</div>';
            $data = array('id' => $project_row['id'], 'date' => $project_row['date_added'], 'html' => $html);
            $proj_arr[] = $data;
        }
    }
    echo json_encode($proj_arr);

Answer 1

您可以在循环之前清空projectWraps div：

var displayProjects = JSON.parse(data),
  $wrapper = $('#projectsWrap'); // I would put this in a var for better performance if using it multiple times

$wrapper.empty(); // empty the wrapper

$(displayProjects).each(function() {
  $wrapper.prepend(this.html);
  console.log(this.html);
});

More information about empty()

如何删除前置的兄弟项目

1 个答案: