Question

更新使用@ kyeiti的解决方案，我设法获得了我需要的其他信息，但我无法导航;我可以在左侧前后移动，但我不能让右侧更新。此外，如果这可以通过一个外部PHP文件来完成，那就太棒了。为了清楚说明，我把整件事放在网上，你可以查看here。此外，我更新了代码部分以反映最新的更改。

更新2：

在@kyeiti的一些帮助之后，我试图让它只使用一个外部PHP。 JS代码完全符合@ kyeiti的更新答案，而我的art.php（现在唯一的外部文件）如下所示。当我打开index.php时，我得不到任何与代码中的两个div相关的内容。我也尝试将它们插入索引文件本身，但显然这不起作用......

目前art.php：

<?php


$username = "root"; //mysql username
$password = ""; //mysql password
$hostname = "localhost"; //hostname
$databasename = '2199'; //databasename

//get pic id from ajax request
if(isset($_POST["pic"]) && is_numeric($_POST["pic"]))
{
    $current_picture = filter_var($_POST["pic"], FILTER_SANITIZE_NUMBER_INT);
}else{
    $current_picture=1;
}

//Connect to Database
$mysqli = new mysqli($hostname, $username, $password, $databasename);

if ($mysqli->connect_error){   
    die('Error : ('. $mysqli->connect_errno .') '. $mysqli->connect_error);
}

//get next picture id
$result = $mysqli->query("SELECT id FROM gola WHERE id > $current_picture ORDER BY id ASC LIMIT 1")->fetch_object();
if($result){
    $next_id = $result->id;
}

//get previous picture id
$result = $mysqli->query("SELECT id FROM gola WHERE id < $current_picture ORDER BY id DESC LIMIT 1")->fetch_object();
if($result){
    $prev_id = $result->id;
}

//get details of current from database
$result = $mysqli->query("SELECT artikel, slika1 FROM gola WHERE id = $current_picture LIMIT 1")->fetch_object();

if($result){

    //construct next/previous button
    $prev_button = (isset($prev_id) && $prev_id>0)?'<a href="#" data-id="'.$prev_id.'" class="get_pic"><span class="glyphicon glyphicon-circle-arrow-left rujz"></span></a>':'';
    $next_button = (isset($next_id) && $next_id>0)?'<a href="#" data-id="'.$next_id.'" class="get_pic"><span class="glyphicon glyphicon-circle-arrow-right rujz"></span></a>':'';

    //output html

echo "<div id='loaded_picture'>";
echo "test"; // Put everything that goes into the picture div here
echo "</div>";

echo "<div id='loaded_text'>";
echo "test"; // And everything that goes into the text div here
echo "</div>";

}

原帖：

我的页面中有两个主要的div，左侧显示照片，右侧应显示有关特定产品的一些信息。

我从MySQL获取了所有数据，并设法将一个可行的解决方案组合在一起进行导航。我可以使用next / prev按钮前进和后退，图像会发生变化。

现在有些代码：

HTML（index.php）：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="layout.css">
<link href='https://fonts.googleapis.com/css?family=Syncopate' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
     $.post( "art.php", { pic: "1"}, function( data ) {
           $("#picture").html( data );
     });
     $.post( "info.php", { id: "1"}, function( data ) {
           $("#info").html( data );
     });

     $("#picture").on("click",".get_pic", function(e){
           var picture_id = $(this).attr('data-id');
           $("#picture").html("<div style=\"margin:50px auto;width:50px;\"><img src=\"loader.gif\" /></div>");
           $.post( "art.php", { pic: picture_id}, function( data ) {
                 $("#picture").html( data );
           });
           return false;
     });

          $("#info").on("click",".get_info", function(e){
           var info_id = $(this).attr('data-id');
           $("#info").html("<div style=\"margin:50px auto;width:50px;\"><img src=\"loader.gif\" /></div>");
           $.post( "info.php", { pic: info_id}, function( data ) {
                 $("#info").html( data );
           });
           return false;
     });
});
</script>
<title>2199</title>
</head>
<body>
<div class="navbar-wrapper">
  <div class="container"> <img src="logo.png" class="boxy"> </div>
</div>
<div class="jumbotron special">
  <div id="picture" align="center"> </div>
</div>
<div class="jumbotron special2">
  <div id="info" align="center"> </div>
</div>
</body>
</html>

HTML（art.php）：

$username = "root"; //mysql username
$password = ""; //mysql password
$hostname = "localhost"; //hostname
$databasename = '2199'; //databasename

//get pic id from ajax request
if(isset($_POST["pic"]) && is_numeric($_POST["pic"]))
{
    $current_picture = filter_var($_POST["pic"], FILTER_SANITIZE_NUMBER_INT);
}else{
    $current_picture=1;
}

//Connect to Database
$mysqli = new mysqli($hostname, $username, $password, $databasename);

if ($mysqli->connect_error){   
    die('Error : ('. $mysqli->connect_errno .') '. $mysqli->connect_error);
}

//get next picture id
$result = $mysqli->query("SELECT id FROM gola WHERE id > $current_picture ORDER BY id ASC LIMIT 1")->fetch_object();
if($result){
    $next_id = $result->id;
}

//get previous picture id
$result = $mysqli->query("SELECT id FROM gola WHERE id < $current_picture ORDER BY id DESC LIMIT 1")->fetch_object();
if($result){
    $prev_id = $result->id;
}

//get details of current from database
$result = $mysqli->query("SELECT artikel, slika1 FROM gola WHERE id = $current_picture LIMIT 1")->fetch_object();

if($result){

    //construct next/previous button
    $prev_button = (isset($prev_id) && $prev_id>0)?'<a href="#" data-id="'.$prev_id.'" class="get_pic"><span class="glyphicon glyphicon-circle-arrow-left rujz"></span></a>':'';
    $next_button = (isset($next_id) && $next_id>0)?'<a href="#" data-id="'.$next_id.'" class="get_pic"><span class="glyphicon glyphicon-circle-arrow-right rujz"></span></a>':'';

    //output html

    echo '<div class="prod_img" style="background-image: url(pictures/';
    echo $result->slika1;
    echo '); background-size: contain; background-repeat: no-repeat; background-position: center center;">';
    echo '<h3>';
    echo $prev_button; 
    echo $result->artikel;
    echo $next_button;
    echo '</h3>';
    echo '</div>';

}

HTML（info.php）：

<?php

$username = "root"; //mysql username
$password = ""; //mysql password
$hostname = "localhost"; //hostname
$databasename = '2199'; //databasename

//get pic id from ajax request
if(isset($_POST["info"]) && is_numeric($_POST["info"]))
{
    $current_info = filter_var($_POST["info"], FILTER_SANITIZE_NUMBER_INT);
}else{
    $current_info=1;
}

//Connect to Database
$mysqli = new mysqli($hostname, $username, $password, $databasename);

if ($mysqli->connect_error){   
    die('Error : ('. $mysqli->connect_errno .') '. $mysqli->connect_error);
}

//get next picture id
$result2 = $mysqli->query("SELECT id FROM gola WHERE id > $current_info ORDER BY id ASC LIMIT 1")->fetch_object();
if($result2){
    $next_id = $result2->id;
}

//get previous picture id
$result2 = $mysqli->query("SELECT id FROM gola WHERE id < $current_info ORDER BY id DESC LIMIT 1")->fetch_object();
if($result2){
    $prev_id = $result2->id;
}

//get details of current from database
$result2 = $mysqli->query("SELECT artikel, slika1, slika2, slika3, dim1, dim2, dim3, obdelava, dodatno FROM gola WHERE id = $current_info LIMIT 1")->fetch_object();

if($result2){

    //construct next/previous button
    $prev_button = (isset($prev_id) && $prev_id>0)?'<a href="#" data-id="'.$prev_id.'" class="get_info"><span class="glyphicon glyphicon-circle-arrow-left rujz-wht"></span></a>':'';
    $next_button = (isset($next_id) && $next_id>0)?'<a href="#" data-id="'.$next_id.'" class="get_info"><span class="glyphicon glyphicon-circle-arrow-right rujz-wht"></span></a>':'';

    //output html

    echo '<div class="info">';
    echo '<h3 style="color: #fff !important;">';
    echo $prev_button; 
    echo $result2->artikel;
    echo $next_button;
    echo '</h3>';
    echo '<br />';
    echo '<p>';
    echo $result2->slika1;
    echo '<br />';
    echo $result2->slika2;
    echo '<br />';
    echo $result2->slika3;
    echo '<br />';
    echo $result2->dim1;
    echo '<br />';
    echo $result2->dim2;
    echo '<br />';
    echo $result2->dim3;
    echo '<br />';
    echo $result2->obdelava;
    echo '<br />';
    echo $result2->dodatno;
    echo '</p>';
    echo '</div>';

}

CSS（你需要它）：

html, body {
    height: 100%;
    background-color: #fff;
    font-size: 62.5%;
}
.special, .special .jumbotron {
    height: 100%;
    background-color: white;
    border: 0px solid red;
    margin-bottom: 0px !important;
}
.special2, .special2 .jumbotron {
    height: 100%;
    background-color: #62a70f;
    border: 0.5rem solid #fff;
    border-radius: 3rem;
    margin-bottom: 0px !important;
    padding: 1rem;
}
.logo {
    border: 1px solid red;
    width: 10%;
    min-height: 100%;
    position: relative;
    height: 100%;
}
#picture {
    border: 0px red solid;
    height: 100%;
    background: #fff;
}
.prod_img {
    height: 100%;
}
h3 {
    font-family: 'Syncopate', sans-serif;
    font-size: 24px;
    font-size: 2.4rem;
    color: #62a70f;
}
.boxy {
    border: 0.5rem solid white;
    position: fixed;
    bottom: 2.5%;
    right: 5%;
    width: 25%;
    padding: 1rem;
    /*  height: 30rem;*/
    background-color: rgba(64,64,64,1);
    border-radius: 3rem;/*  background-image: url(logo.png);
    background-size: contain;
    background-repeat: no-repeat;*/
}

@media (min-width:768px) {
.boxy {
    border: 0.5rem solid white;
    position: fixed;
    bottom: 5%;
    right: 45%;
    width: 10%;
    /*  height: 30rem;*/
    background-color: rgba(64,64,64,1);
    border-radius: 3rem;/*  background-image: url(logo.png);
    background-size: contain;
    background-repeat: no-repeat;*/
}
.navbar {
    min-height: 10% !important;
    max-height: 10% !important;
    height: 10%;
    background-image: url(logo.png);
    background-size: contain;
    background-repeat: no-repeat;
    border: 0px solid green;
    background-color: #0e0e0e;
    animation-name: example;
    animation-duration: 1s;
    animation-timing-function: ease;
}
.navbar-header {
    border: 0px solid green;
    min-height: 100%;
}
.logo {
    visibility: collapse;
}
.special, .special .jumbotron {
    width: 50%;
    float: left;
    margin-bottom: 0px !important;
}
.special2, .special2 .jumbotron {
    width: 50%;
    float: left;
    margin-bottom: 0px !important;
}
h3 {
    font-size: 48px;
    font-size: 4.8rem;
}
.rujz {
    font-size: 36px;
    font-size: 3.6rem;
    color: #62a70f;
    margin: 0.5em;
}

.rujz-wht {
    font-size: 36px;
    font-size: 3.6rem;
    color: #fff;
    margin: 0.5em;
}

}
 @keyframes example {
 0% {
bottom:-10%;
}
 100% {
bottom:0%;
}
}

现在，我的问题如下：

图像和产品名称在<div id="picture" align="center"> </div>

中正确显示

我想要完成的是从数据库中获取其他数据并将其显示在屏幕的另一半。因为这一切都发生在art.php中，所以不像键入echo $results->columnName那么容易，所以我需要一些帮助。

提前致谢：）

Answer 1

您可以创建另一个文件，例如art.php，以显示您需要的数据，并将该文件的其他帖子添加到您的onclick事件中。

这是我从index.php编辑javascript的方式：

$(document).ready(function() {
     $.post( "art.php", { pic: "1"}, function( data ) {
           $("#picture").html( data );
     });
     $.post( "text.php", { id: "1"}, function( data ) {
           $("#text").html( data );
     });

     $("#picture").on("click",".get_pic", function(e){
           var picture_id = $(this).attr('data-id');
           $("#picture").html("<div style=\"margin:50px auto;width:50px;\"><img src=\"loader.gif\" /></div>");
           $.post( "art.php", { pic: picture_id}, function( data ) {
                 $("#picture").html( data );
           });
           $.post( "text.php", { id: picture_id}, function( data ) {
                 $("#text").html( data );
           });
           return false;
     });
});

我对text.php说的不多，因为我不知道你想要显示什么信息（或者你想如何显示它）。

编辑：如果您只想要一个帖子而只需要一个外部文件，则可以使用jQuerys .find - 函数从ajax数据中提取部分。

使用Javascript：

$(document).ready(function() {
     $.post( "art.php", { pic: "1"}, function( data ) {
           $("#picture").html( $(data).find("#loaded_picture") );
           $("#text").html( $(data).find("#loaded_text") );
     });

     $("#picture").on("click",".get_pic", function(e){
           var picture_id = $(this).attr('data-id');
           $("#picture").html("<div style=\"margin:50px auto;width:50px;\"><img src=\"loader.gif\" /></div>");
           $.post( "art.php", { pic: picture_id}, function( data ) {
                 $("#picture").html( $(data).find("#loaded_picture") );
                 $("#text").html( $(data).find("#loaded_text") );
           });
           return false;
     });
});

在art.php中：

//get pic id from ajax request
if(isset($_POST["pic"]) && is_numeric($_POST["pic"])) {
    $current_picture = filter_var($_POST["pic"], FILTER_SANITIZE_NUMBER_INT);
} else {
    $current_picture=1;
}

/* Put connect to database and other preparations here */
echo "<div>";
echo "<div id='loaded_picture'>";
// Put everything that goes into the picture div here
echo "</div>"

echo "<div id='loaded_text'>";
// And everything that goes into the text div here
echo "</div>";
echo "</div>";

Answer 2

通过查看index.php，我认为您无法更新

$result->artikel

当您调用另一个图像时，在表格部分中

。如果是这种情况，那么您可以使用像$result->artikel这样的div将art {{}}文件包裹在art.php文件中并回显它。现在，您可以使用新数据更新表格部分。

<div class="artikel">$result->artikel</div>

这也将更新您的表格部分

使用分页

2 个答案: