【问题标题】:javascript change position depending on numberjavascript根据数字改变位置
【发布时间】:2015-06-26 20:05:28
【问题描述】:

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

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

这一切都填好后,DB看起来是这样的:

火车信息:

车轴:

转向架:

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

现在我通过选择轴的数量来制作这个形状,然后将它们转成一个圆圈。 我通过选择轴表来设置距离,并使用 margin-left。

现在。实际需要添加的东西,每个轴距为 1000-4000。因此,当我添加它时,如果火车成形,它将是巨大的。

所以我在想,(但不知道是否可行)而不是通过轴距离设置最终结果距离。但是有转向架编号。

所以轴 1 和 2 的转向架编号为 1。我希望转向架编号 1 位于左侧。
轴 3 和 4 的转向架编号为 2。我希望在 1 号旁边有 200px 之类的转向架。
轴 5 和 6 的转向架编号为 3。我希望在 2 号旁边有 200 像素。等等。等等。

这是 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 axis where train_id = train_id

编辑:

这里是一个例子:

【问题讨论】:

  • 有什么问题?
  • @Sidd 现在我通过选择轴数来制作这个形状,然后将它们转成一个圆圈。我通过选择轴表来设置距离,并使用左边距。现在。实际需要添加的东西,每个轴距为 1000-4000。因此,当我添加这一点时,如果火车成形,它将是巨大的。所以我在想,(但不知道是否可行)而不是通过轴距设置最终结果距离。但有了转向架编号。
  • 所以轴之间的距离不再重要了,对吧?
  • 正确的@AlvaroMontoro

标签: javascript php html css mysqli


【解决方案1】:

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

由于轴之间的距离不再重要(在 cmets 中指定),因此请关注转向架。像这样选择转向架及其轴:

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 类将具有margin-left 的200px(将其与下一个转向架分开), .axle 类将包含您想要添加的任何 margin-left

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多