Question

我的脚本应显示MySQL数据库中的前10个图像，并让脚本隐藏其余用户图像，直到用户单击链接<a href="#">View All</a>并使其余图像向下滑动用户点击链接。

我的问题：所以我的问题是当用户点击链接<a href="#">View All</a>时我的图片无法显示，我想知道如何解决这个问题以便我的所有用户用户点击链接时会显示图像吗？

PHP＆amp; MySQL代码。

$multiple = FALSE;
$row_count = 0;

$dbc = mysqli_query($mysqli, "SELECT * FROM images WHERE images.user_id = '$user_id'");
if (!$dbc) {
    print mysqli_error($mysqli);
} else {
    echo '<div id="images">';
    while ($row = mysqli_fetch_array($dbc)) { 
        if (($row_count % 5) == 0) {
            echo '<ul>';
        }
        echo '<li><img src="/images/thumbs/' . $row['url'] . '" /></li>';

        if (($row_count % 5) == 4) {
            $multiple = TRUE;
            echo '</ul>';
        } else {
            $multiple = FALSE;
        }
        $row_count++;
    }
    if ($multiple == FALSE) {
        echo '</ul>';
    }
    if ($row_count == 5) {
        echo '</div>'; 
        echo '<div id="hidden">';
    }
}
echo '</div>';
echo '<a href="#" id="view_all">View All</a>';

JQuery代码。

$(document).ready(function(){
    $("#hidden").hide();
    $("#view_all").click(function(){
      $("#hidden").slideDown();
    });
});

以下是HTML代码

<div id="images">
    <ul>
        <li><img src="../images/image.png" /></li>
        <li><img src="../images/image.png" /></li>
        <li><img src="../images/image.png" /></li>
        <li><img src="../images/image.png" /></li>
        <li><img src="../images/image.png" /></li>
    </ul>
    <ul>
        <li><img src="../images/image.png" /></li>
        <li><img src="../images/image.png" /></li>
        <li><img src="../images/image.png" /></li>
        <li><img src="../images/image.png" /></li>
        <li><img src="../images/image.png" /></li>
    </ul>

    </div><div id="hidden"></div>
    <a href="#" id="view_all">View All</a>

Answer 1

你需要一些#hidden div中的图片。您可以使用css隐藏#hidden div来简化代码（#hidden {display：none;}

使用以下jQuery：

（文档）$。就绪（函数（）{

    $("#view_all").click(function(){
      $("#hidden").slideToggle("slow");
      return false;
    });

});

Answer 2

另一次尝试。

你'隐藏'div在循环之外，因此不能在其中打印图像。如果你在代码中使用了一些缩进，那就很清楚了：

while($row = mysqli_fetch_array($dbc)){ 

    if(($row_count % 5) == 0){
        echo '<ul>';
    }
    echo '<li><img src="/images/thumbs/' . $row['url'] . '" /></li>';

    if(($row_count % 5) == 4) {
        $multiple = TRUE;
        echo "</ul>";
    } else {
        $multiple = FALSE;
    }
    $row_count++;
}
if($multiple == FALSE) {
    echo "</ul>";
}
if($row_count == 5) {
    echo  '</div>'; 
    echo  '<div id="hidden">';
}

更新尝试在if($row_count == 5) {...}之后立即移动$row_count++;。（我没有运行它，但看起来是正确的事情）。

Answer 3

请原谅我，如果我错过了什么，但似乎你没有把任何东西放进“隐藏”的div。如果你想从服务器动态获取图像，这是有意义的，我建议加快时间。但是，没有jQuery代码可以执行此操作。你可以这样做：

// get-more-photos.php or something
$multiple = FALSE;
$row_count = 0;

$dbc = mysqli_query($mysqli,"SELECT *
                             FROM images
                             WHERE images.user_id = '$user_id'
                             LIMIT ".mysql_real_escape_string($GET['offset']).",".mysql_real_escape_string($GET['offset'])+10."");
if (!$dbc) {
    print mysqli_error($mysqli);
} else {
    while($row = mysqli_fetch_array($dbc)){ 

    if(($row_count % 5) == 0){
        echo '<ul>';
    }
        echo '<li><img src="/images/thumbs/' . $row['url'] . '" /></li>';

if(($row_count % 5) == 4) {
    $multiple = TRUE;
    echo "</ul>";
} else {
    $multiple = FALSE;
}
$row_count++;
}
if($multiple == FALSE) {
    echo "</ul>";
}

在客户端上，您可以使用以下内容来调用它：

$("#view_all").click(function(){
  $("#hidden").html("Loading...").slideDown();
  $.get('get-more-photos.php?offset=10', '', function(data) {
    $("#hidden").html(data).slideDown();
  });
});

当然，所有未经测试的，但它应该稍作修改。

哦，在这种情况下，查看全部按钮只会显示十个，这取决于照片的数量更合理。然而，它只是第一次显示10个，修复它留给读者的练习:)。

编辑：如果需要，您不必从服务器动态获取图像（虽然我推荐它）。例如，您可以执行以下操作：

// display-images.php
echo "<div>";
include "get-more-photos.php?offset=0";
echo "</div>";
echo '<div id="hidden">';
include "get-more-photos.php?offset=10";
include "get-more-photos.php?offset=20";
include "get-more-photos.php?offset=30";
include "get-more-photos.php?offset=40";
include "get-more-photos.php?offset=50";
include "get-more-photos.php?offset=60";
include "get-more-photos.php?offset=70";
include "get-more-photos.php?offset=80";
include "get-more-photos.php?offset=90";
echo "</div>";

当然，这只会得到前100个，并且可能会产生一堆空列表，但是如果你有超过100个图像，或者担心额外的列表，我会动态地获取它们：）。 / p>

PHP，MySQL＆amp; JQuery Image显示问题？

3 个答案: