2

我正在为一个假商店网站制作一个“目录”页面，当我单击页面上显示的缩略图之一时，java-script 覆盖旨在显示产品的所有信息（例如更大的图像' photo1') 与该缩略图（产品在 SQL 数据库中）。

虽然这确实会按预期拉出叠加层，但它不会只获得一个相关的“photo1”，而是从表格中获取所有这些。

我得到了老师的帮助，但她甚至帮不上忙，但据我所知，我需要一种方法来存储选择的缩略图，以便我可以澄清要为覆盖拉取哪些信息。

主要的：

<div id="overlay">
    <div>
    <?php
        include 'includes/connection.php';

        try {
            $sql = 'SELECT * FROM item;';
            $resultSet = $pdo->query($sql);
        } // end try
        catch (PDOException $e) {
            echo 'Error fetching items: ' . $e->getMessage();
            exit();
        } // end catch

        foreach ($resultSet as $row) {
            // put each rows's elements into variables
            $itemName = $row['itemName'];
            $unitPrice = $row['unitPrice'];
            $qtyOnHand = $row['qtyOnHand'];
            $thumbNail = $row['thumbNail'];
            $photo1 = $row['photo1'];

            echo '<td><img  src="' .$photo1 .'" width="500" height="500" alt="$itemName" title="$itemName" ></td>';
        }
    ?>

    <p>Content you want the user to see goes here.</p>
Click here to [<a href='#' onclick='overlay()'>close</a>]
    </div>
</div>

<div id="MainHolder">
    <div id="Headerbar">
        <?php
            include 'includes/login.php';
        ?>
        <div class="ContentBody">
            <div class="Content">
                <article> 
                    <h2>Store</h2>
                    <?php
                        include 'includes/connection.php';
                        try
                        {
                            $sql = 'SELECT * FROM item;';
                            $resultSet = $pdo->query($sql);
                        } // end try
                        catch (PDOException $e)
                        {
                            echo 'Error fetching items: ' . $e->getMessage();
                            exit();
                        } // end catch
                    ?>
                    <!-- open table -->

                    <article>
                    <?php
                        // read result set and populate table 
                        foreach ($resultSet as $row)
                        {
                            // put each rows's elements into variables
                            $itemName = $row['itemName'];
                            $thumbNail = $row['thumbNail'];
                            $qtyOnHand = $row['qtyOnHand'];
                            // test for out of stock condition
                            // if no stock, display out of stock image else display add to cart image 
                            if ($qtyOnHand <= 0) {
                                echo '<td><img  src="images/outOfStock.png" border="3" class="floatingImage" height="80" width="80" alt="" title=""></td>';
                            } else {
                                echo '<td><img class="floatingImage" border="3" src="' .$thumbNail .'" width="80" height="80" alt="' .$itemName .'" title="' .$itemName .'" onclick="overlay()" ></td>';
                            }
                        } // end foreach
                        // close table 
                        echo '</article>';
                    ?>
                </article>
             </div>
             <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        </div>          
    </div>
</div>

Javascript：

function overlay() {
    el = document.getElementById("overlay");
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}

覆盖和目录在同一个文件中。我还在学习，所以对于任何混乱的格式/代码，我深表歉意。

编辑：我已经合并了一些代码，这几乎显示了我的整个商店页面，除了标题，等等......

4

4 回答 4

1

您需要编辑覆盖功能以将 itemName 发送到服务器，这将告诉您的服务器用户单击了哪个项目。

叠加功能：

function overlay() {

    var item = this.getAttribute("title");//this gets the name of item that was clicked
}

现在我们需要向服务器设置一个 ajax 请求。

function ajaxRequest(item) {
  if (window.XMLHttpRequest){
    var xmlhttp= new XMLHttpRequest();
    xmlhttp.onreadystatechange=function(){
      if (xmlhttp.readyState==4 && xmlhttp.status == 200){//show the overlay after we recieve a response from the server
        el = document.getElementById("overlay");
        el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
        el.innerHtml = ''; //remove previous response
        el.innerHTML=xmlhttp.responseText; //insert the response in your overlay
      }
    }
    xmlhttp.open("GET","overlay.php?item="+ encodeURIComponent(item),true);
    xmlhttp.send();
  }
}

现在我们需要编辑覆盖函数来调用 ajaxRequest 函数：

function overlay() {

    var item = this.getAttribute("title");//this gets the name of item that was clicked
    ajaxRequest(item); //send the item name to server
}

完成此操作后，您的 PHP 将在您的服务器上收到一个变量。创建一个名为 overlay.php 的新文件并插入以下代码。将此文件保存在与 Store.php 文件相同的目录中。

覆盖.php：

<?php
if (isset($_GET['item'])) {//check if you received the name
    $itemName = $_GET['item'];

   //query database for the itemName

                        try
                        {
                            $sql = 'SELECT * FROM item WHERE itemName ='.$itemName.';';//just select data with the matching item name.
                            $resultSet = $pdo->query($sql);
                        } // end try


                        catch (PDOException $e)
                        {
                            echo 'Error fetching items: ' . $e->getMessage();
                            exit();
                        } // end catch
    //fetch the data
    foreach ($resultSet as $row) {
        // put each rows's elements into variables
        $itemName = $row['itemName'];
        $unitPrice = $row['unitPrice'];
        $qtyOnHand = $row['qtyOnHand'];
        $thumbNail = $row['thumbNail'];
        $photo1 = $row['photo1'];
    echo '<td><img  src="' .$photo1 .'" width="500" height="500" alt="$itemName" title="$itemName" ></td>';
    }//end foreach

}//end if
?>
于 2013-06-27T03:27:46.470 回答
0

我尝试了解您的问题并使用 jQuery 来解决它。

首先你必须加载 jQuery lib

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

并将 display:none 样式添加到覆盖中的每个生产信息（默认为隐藏）。

echo '<td><img src="' .$photo1 .'" width="500" height="500" alt="$itemName" title="$itemName" style="display:none" ></td>';

删除缩略图内联 onClick 事件触发器

echo '<td><img class="floatingImage" border="3" src="' .$thumbNail .'" width="80" height="80" alt="' .$itemName .'" title="' .$itemName.'"'></td>';

添加此单击事件处理程序，因此 jQuery 可以显示用户单击的生产信息。

$(".floatingImage").click(function(){
    var itemName = $(this).attr('alt');
    $('#overlay img').hide();
    $('#overlay img[alt="'+itemName+'"]').show();
    overlay();
});

希望这对你有帮助。

于 2013-06-27T04:03:15.877 回答
0

如果您想绝对在客户端存储数据，您可以使用带有嵌入式 sql lite 数据库的 html5 的本地存储功能，使用 Javascript 存储和检索信息。

于 2013-06-27T03:43:51.053 回答
0

当您第一次使用此循环从数据库中获取产品时：

foreach ($resultSet as $row) {
    // put each rows's elements into variables
    $itemName = $row['itemName'];
    $unitPrice = $row['unitPrice'];
    $qtyOnHand = $row['qtyOnHand'];
    $thumbNail = $row['thumbNail'];
    $photo1 = $row['photo1'];
    echo '<td><img  src="' .$photo1 .'" width="500" height="500" alt="$itemName" title="$itemName" ></td>';
}

当用户单击叠加层的图像时，这些是您想要显示的所有属性吗？如果是这样，只需将值存储在实际<img>标签中：

    echo '<td><img src="' .$photo1 .'" width="500" height="500" alt="$itemName" title="$itemName" data-unit-price="$unitPrice" data-qty="$qtyOnhand"></td>';

然后您可以使用 Javascript 访问数据并显示在您的叠加层中。

于 2013-06-27T03:50:38.297 回答