Question

我需要帮助将值传递到灯箱以显示购物车信息。

目前我只有一个简单的设置，只显示一个静态句子。

Javascript代码：

function displayHideBox(boxNumber) 
{ 
    if(document.getElementById("LightBox"+boxNumber).style.display=="none") {
        document.getElementById("LightBox"+boxNumber).style.display="block";
        document.getElementById("grayBG").style.display="block"; 
    } else { 
        document.getElementById("LightBox"+boxNumber).style.display="none";
        document.getElementById("grayBG").style.display="none"; 
    } 
}

HTML code：

<a href="<?$_SERVER['PHP_SELF']?>?action=add&id=<?=$id;?>" onclick="displayHideBox('1'); return false;">Open Box</a>

<div id="grayBG" class="grayBox" style="display:none;"></div> 
<div id="LightBox1" class="box_content" style="display:none;"> 
<table cellpadding="3" cellspacing="0" border="0"> 
  <tr align="left"> 
    <td colspan="2" bgcolor="#FFFFFF" style="padding:10px;"><div onclick="displayHideBox('1'); return false;" style="cursor:pointer;" align="right">X</div><p><!-- Box content -->Text of the box!!!</p></td> 
  </tr> 
</table> 
</div>

我已经设置了一个简单的购物车，目前当您添加产品时，它会进入购物车页面，在该页面中创建会话并在您的购物车中显示您的商品以及删除或继续购物的选项。但是当你在购物车中添加一件商品时，我需要它来显示一个灯箱，显示购物车中的商品信息和其他商品。

这里是＆＃34;添加到购物车＆＃34;的当前代码特征

<table border="1">

    <?php
        //Select all of the relevant part details
        $prod_query = 'SELECT * FROM *****.*****';
        $prod_details = db_query_into_array_enhanced($mysql_connection, $prod_query);                       
        $count = count($prod_details);
        for($i = 0; $i < $count; $i++) 
            {?>         
             <tr>
                <? $id = $prod_details[$i]['catID'];?>
                 <td><?=$prod_details[$i]['catID'];?></td>
                 <td><?=$prod_details[$i]['shortDescription'];?></td>
                 <td><?=$prod_details[$i]['rrp'];?></td>
                 <td><a href="cart.php?action=add&id=<?=$id;?>">Add To Cart</a></td>

             </tr>
        <?}?>
</table>


<a href="cart.php">View Cart</a>

所以我觉得我的问题是如何将这些动态数据输入我的灯箱？

我希望我已经解释得这么好，有人可以帮助我......提前谢谢

Answer 1

一种可能的选择是在Javascript中使用全局对象来存储购物车中的条目。你可以通过创建一个变量来实现这个目的，例如'var cartArr = [];'在你的javascript中，然后当一个项目被添加到购物车时，写一个更新cartArr变量的函数。然后在灯箱内引用它。

**请注意，这是未经测试的，并且是一个从灯箱访问的可能方式的示例。另请注意，您需要添加功能以验证商品是否已经在购物车中，然后递增，以及从购物车中删除。

希望它有所帮助。

    <?php
            //Select all of the relevant part details
            $prod_query = 'SELECT * FROM *****.*****';
            $prod_details = db_query_into_array_enhanced($mysql_connection, $prod_query);                       
            $count = count($prod_details);
            for($i = 0; $i < $count; $i++) 
                {?>         
                 <tr>
                    <? $id = $prod_details[$i]['catID'];?>
                     <td><?=$prod_details[$i]['catID'];?></td>
                     <td><?=$prod_details[$i]['shortDescription'];?></td>
                     <td><?=$prod_details[$i]['rrp'];?></td>
                     <td><a href="cart.php?action=add&id=<?=$id;?>">Add To Cart</a></td>
                echo "
                <script type=\"text/javascript\">
                var cartitem = {id:$prod_details[$i]['catID'], desc:$prod_details[$i]['shortDescription'], rrp:$prod_details[$i]['rrp']};
               addToCartJs(cartitem);
                </script>
            ";
                 </tr>
            <?}?>

==== JS

var cartArr = [];

function addToCartJs(item){
  cartArr.push(item);
}

===所附

    function setCartDisplay(boxNumber){
        var itemdisplay = '';
        for(var i=0; i<cartArr.length;i++){
            var itemdisplay = '<span class="cartdisplay">ItemNo:'+cartArr[i].id+'</span>';
            itemdisplay += '<span class="cartdisplay">Description:'+cartArr[i].desc+'</span>';
        }
        document.getElementById("LightBox"+boxNumber).innerHTML = itemdisplay;
    }

===测试页面=== 使用它来测试和显示信息以及它正在做什么......这是一个很好的学习机会。请记住，最好学习和理解您的代码，以便将来添加和维护。 “给一个人一条鱼，你喂他一天。教一个人钓鱼，你喂他一辈子”

<div id="LightBox1" class="box_content" style="display:none;"> 
<script type="text/javascript">
var cartArr = [];

function testCartItem(){
    var cartitem = {id:1001, desc:'description here', rrp:1002 };
    addToCartJs(cartitem);
}

function addToCartJs(item){
  cartArr.push(item);
} 

function setCartDisplay(boxNumber){
    var itemdisplay = '';
    for(var i=0; i<cartArr.length;i++){
        var itemdisplay = '<span class="cartdisplay">ItemNo:'+cartArr[i].id+'</span><br>';
        itemdisplay += '<span class="cartdisplay">Description:'+cartArr[i].desc+'</span>';
    }
    document.getElementById("LightBox"+boxNumber).innerHTML = itemdisplay;
    document.getElementById("LightBox"+boxNumber).style.display="block";
}

testCartItem();
console.log(cartArr);
setCartDisplay(1);
</script>

将值传递到灯箱中

1 个答案: