javascript 根据数字改变位置

Question

当人们填写表格时，所有数据都会发送并保存在数据库中。例如：

现在人们填写车轴的距离（在下一页），车轴的距离得到更新。他们对转向架做同样的事情 table（艰难的不是距离，而是转向架的数量）

全部填写完毕后，数据库如下所示：

列车信息：

车轴：

转向架：

现在有了下面的信息，就可以做出火车的形状了。

现在我通过选择轴的数量来制作这个形状，然后将它们转成一个圆圈。我通过选择轴 table 并使用 margin-left.

来设置距离

现在。实际需要添加的东西，每个轴距为 1000-4000。所以当我加上那个的时候，如果火车成形了，那将是巨大的。

所以我在想，（但不知道是否可行）而不是通过轴距设置最终结果距离。但是有了转向架号码。

因此轴 1 和 2 的转向架编号为 1。我希望转向架编号为 1 在左侧。
轴 3 和 4 的转向架编号为 2。我希望在 1 号旁边有 200px 之类的。
轴 5 和 6 的转向架编号为 3。我希望在数字 2 旁边有 200px。等等等等

这是 end_results 使其成型的方法：

<div id="axle_position2">
            <?php      
                foreach($show_axle as $axlefigure){ ?>
                    <div style="margin-left:<?php echo $axlefigure['distance'];?>px;"> 
                        <?php echo $axlefigure['axle'] ?>
                    </div>
            <?php
                } 
            ?>
        </div>

它的功能只是：SELECT * FROM axle where train_id = train_id

编辑：

举个例子：

Answer 1

有很多方法可以解决这个问题。这是一种可能的解决方案：

由于车轴之间的距离不再重要（在评论中指定），请关注转向架。 Select 转向架和它们的车轴是这样的：

SELECT bogie_nr, GROUP_CONCAT(axle_id) AS axles
FROM   `bogie` 
WHERE   train_id = 17 
GROUP BY bogie_nr

此 select 将 return 转向架的编号，以及该特定转向架中以逗号分隔的车轴列表。您唯一要做的就是像您一样遍历结果，并用逗号分隔 axles 字符串。

最后，要显示结果，请将车轴包裹在转向架内并适当添加样式。像这样：（$bogies 将是上面查询的结果集）

<?php foreach($bogies as $bogie) { ?>
    <div class="bogie" id="bogie<?php echo $bogie["bogie_nr"]; ?>"> 
        <?php 
            $axles = explode(",", $bogie["axles"]);
            foreach($axles as $axle) {
        ?>
            <div class="axle"><?php echo $axle; ?></div>
        <?php } ?>
    </div>
<?php } ?>

我没有添加样式来使它 更清晰，但我的想法是 .bogie class 有 200 像素的 margin-left（将其与下一个转向架分开），.axle class 将包含您要添加的任何 margin-left。

javascript 根据数字改变位置

javascript change position depending on number

html

javascript

css

php

mysqli