在php循环中使隐形div工作

时间:2015-05-17 15:08:01

标签: javascript php html loops mysqli

我是php和这个网站的新手,请原谅我,如果这听起来简单或偏离主题。我从mysql数据库表中获取了4列(id [int],name [varchar],image [varchar]和price [int] 12行)中的数据。我想在页面上显示数据(图像和仅限按钮 - 此部分有效)当按下按钮时,会出现一个显示更多细节的显示框(名称和图像 - 这不会)。如果你不明白我在尝试什么要转到amazon website,看看当您按下主页上的产品快速查看时,它会打开一个显示更多详细信息的框。 这是我的代码的摘录:

<div id="viewItem">
    <div class="viewItemWrapper">
        <div class="viewContent">
            <div class="text-right" style="cursor:point;"><a href="javascript:void(0)" onclick="toggle_visibility('viewItem');"><strong>X</strong></a></div>
            <div class="text-center"><img id="myTarget" src="" width="320" height="320" alt="Owl Image"></div>
            <div id="product_name"><?php echo $namedeli ?></div>
            <div id="product_price_container">KSh.<span id="product_price"><?php echo $pricedeli?></span></div>
            <br>
            <button class="btn btn-default" id="box_button">
                Add to Cart
                &nbsp &nbsp
                <span class="glyphicon glyphicon-shopping-cart"></span>
            </button>
            <div style="float:right; margin-right:25px;"><span style="font-size:1.2em;">Quantity:</span><span id="quantity">0</span></div>
        </div>
    </div>
</div>

<?php
$sqldeli = "SELECT * FROM deli";
$resultdeli = mysqli_query($dbc, $sqldeli);

if(mysqli_num_rows($resultdeli) == 12){
    while($row = mysqli_fetch_assoc($resultdeli)) {
        $namedeli = $row['name'];
        $imagedeli = $row['image'];
        $pricedeli = $row['price'];

        echo "<div id=\"item\">\n";
        echo "<a href=\"#\" target=\"_blank\"><img src=$imagedeli alt=\"Owl Image\" id=\"homeimage\"></a>\n";
        echo "<a class=\"btn btn-default dropdown-toggle viewbuttons\" onclick='toggle_visibility(\"viewItem\");changeImage($imagedeli);'>View Item</a>\n";
        echo "</div>";
        }
    }
        else{
            echo "Error Connecting";
            }
?>

1 个答案:

答案 0 :(得分:0)

jQuery非常有用。看一下这个live sample

<强> CSS 隐藏细节DIV

.hidden_data {display: none;}

要更新

的PHP代码
...
...
echo '<div class="item">';
echo '<img src="http://www.linkingyourthinking.com/ezine/icon_owl.png" alt="Owl Image"  width="100"/>';
echo '<a href="#" target="" class="active_data btn btn-default dropdown-toggle viewbuttons">';
echo 'View Item 1';
echo  '</a>';
echo '<div class="hidden_data">Item: $namedeli Price: $pricedeli <img src="$imgdeli"></div>';
echo '</div>';
....

jQuery代码

jquery代码必须位于jquery库之后的BODY末尾。要加载jquery库,您可以使用:

<script src='//code.jquery.com/jquery-1.11.3.min.js'></script>

<script>
$(document).ready(function(){
      var img_a = 'http://www.linkingyourthinking.com/ezine/icon_owl.png';
      var img_b = "http://fc06.deviantart.net/fs71/f/2012/220/8/7/owl_png_by_vechy-d5a9ob2.png";


    $(document).on("click", ".active_data", function(event){
        event.preventDefault();

        var item_sel = $(this).parent(".item");
         // restore image
        $(".item img").attr("src", img_a);
        $(".hidden_data").fadeOut(500).promise().done(function(){
            $(item_sel).children(".hidden_data").fadeIn(500);
            // set new image
            $(item_sel).children("img").attr("src", img_b);
        })

    })

})
</script>