javascript根据数字改变位置

Question

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

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

填写完所有内容后，数据库如下所示:

火车信息:

车轴:

转向架:

现在有了以下信息，它就形成了火车的形状。

现在我通过选择轴的数量来制作这个形状，然后将它们转成一个圆圈。我通过选择轴表设置距离，并使用 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 bogie_nr, GROUP_CONCAT(axle_id) AS axles
FROM   `bogie` 
WHERE   train_id = 17 
GROUP BY bogie_nr

此选择将返回转向架的编号，以及该特定转向架中以逗号分隔的车轴列表。您唯一要做的就是像您一样遍历结果，并用逗号分隔 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 类将有 200 像素的 margin-left(将其与下一个转向架分开)，.axle 类将具有您要添加的任何 margin-left。