Question

我正在尝试制作一个虚拟货架类型的东西，它通过MySQL数据库填充。列shelfPos保存项目在货架上的位置。每行/'shelf'以<div class="shelfRow">开头，显然以</div>结尾，因此它的样式和位置正确。可以使用jQuery UI可放置交互来移动货架上的项目。

整体布局如下：http://jsfiddle.net/aRA5D/
每个架子可以容纳5个项目（从左到右）。

我在填充货架时遇到了麻烦。目前我已经得到了这个:(这取代了HTML）

<?php
$sql="SELECT * FROM shelf WHERE userID='$userID'";
$result=mysql_query($sql);

if (mysql_num_rows($result) == 0) {
    // Show a message of some sort? (No items)
}
else {
    $tries = 1;
    $times = 10; // How many shelves. (10 = 2 shelves)

    while(($row = mysql_fetch_array($result)) && ($tries <= $times)) {
        while ($tries <= $times) {
            if ($tries == $row['shelfPos']) {
                echo '<div class="drop" id="drop'.$tries.'"><div class="boxArt" id="'.$row['gameID'].'">'.$row['gameID'].'</div></div>';
            }
            else {
                echo '<div class="drop" id="drop'.$tries.'"></div>';
            }

            $tries = $tries + 1;
        }

        $times = $times + 5;
    }
}
?>

它有几个问题。它不包括<div class="shelfRow"> html（不知道如何/放在哪里，因为它需要在每5个'空白'和真实项目之后回显 - for循环可能？）和它需要我输入货架数量（在这种情况下为2）。是否可以根据物品的位置确定需要多少个货架？这样做很尴尬，因为它还需要在它们之前和之后回显“空白”.drop div，以便可以移动项目。

希望这一切都有意义。谢谢你的帮助！

Answer 1

首先，你需要按照ShelfPos的顺序获取数据

"SELECT * FROM shelf WHERE userID='$userID' order by shelfPos asc"

试试这段代码：

...
$i = 0;

while($row = mysql_fetch_array($result)) {

      //Each 5
      if($i % 5 == 0) echo '<div class="shelfRow">';

        if ($i == $row['shelfPos']) {
            echo '<div class="drop" id="drop'.$i.'"><div class="boxArt" id="'.$row['gameID'].'">'.$row['gameID'].'</div></div>';
        }
        else {
            echo '<div class="drop" id="drop'.$i.'"></div>';
        }

        //close shelfrow div
        if($i % 5 == 4) echo '</div>';

        $i++;
    }

 //to complete the loop
 $shelv_left = 5 - ($i % 5);
 if($shelv_left < 5) {
 for($j=0; $j < $shelv_left; $j++) {
    echo '<div class="drop" id="drop'.($i+$j).'"></div>';
 }
 echo '</div>'; // end shelfrow div
}
...

制作虚拟货架并通过数据库填充它

1 个答案: