定位按百分比在foreach

Question

我有一个页面，看起来像这样现在：

，并为这个代码是：

<?php 
    $count_axle = $database->count_axles($_GET['train_id']);  
    foreach($count_axle as $counting){ 
}?> 
    <div id="axle_bogie_border"> 
     <img id="count_train_image" src="Images/add_train1.png" alt="Train look" style="width:<?php echo $counting['totaldistance']; ?>%"> 
     <?php 
       $show_axle = $database->axles($_GET['train_id']); 
     ?> 


     <div id="axle_position_count"> 
      <?php  
       foreach($show_axle as $axlefigure){ ?> 
        <div id="count_axle_figure" style="margin-left:<?php echo $counting['totaldistance']; ?>%"> 
         <?php echo $axlefigure['axle'] ?> 
        </div> 
      <?php 
       } 
      ?><br /><br /><br />  
     </div> 
    </div> 

而CSS：

#axle_bogie_border { 
    border: 2px solid black; 
    width: 100%; 
    height: auto; 
    overflow-x: scroll; 
    white-space: nowrap; 
} 

#count_train_image{ 
    margin-left: 10%; 
    margin-right: 10%; 
    height: 100px; 
    display: inline-block; 
    position: relative; 
    float: left; 
} 


#show_length{ 
    border-bottom: 2px solid black; 
    width: 100%; 
} 

#show_length2{ 
    border-bottom: 2px solid black; 
    width: 10%; 
} 



#axle_position_count { 
    margin-top: 10%; 
    margin-left: 10%; 
} 

#count_axle_figure { 
    background: black; 
    width: 40px; 
    height: 40px; 
    border-radius: 50px; 
    float: left; 
} 

没错。所以我根据数据库的总和制作图像的宽度。举个例子。你看到的每个圆圈（在这个例子中是4个）都有一个距离。洙：

• 轴1 = 2000
• 车轴2 = 8000
• 轴3 = 2000
• 轴4 = 8000

在总这是20.000毫米20.000毫米=20米。所以这列火车是20米。现在我这个规模下降到percantages：（见图片宽度）

function count_axles($id) { 
     $sql = "SELECT (sum(distance))/(25000)*(100) as totaldistance from axle WHERE train_id = :train_id"; 
     $sth = $this->pdo->prepare($sql); 
     $sth->bindParam(":train_id", $id, PDO::PARAM_STR); 
     $sth->execute(); 
     return $sth->fetchAll(); 
    } 

在这里，我告诉大家，100％是25.000毫米（25米）。 现在我也需要这个轴位置。
所以轴1 =例如总数的10％。所以我需要左边10％（保证金）
车轴2 = 5％。所以我需要车轴1+ 5％=左侧15％。 等

每个轴都有自己的ID（这里的DB图像）

所以最终我想最终的结果需要看起来像一个小火车。 （所以前两个车轴离开，最后2个车轴向右）在火车图像下。 像这样：

Answer 1

我不知道为什么这么多人高举这个问题。

对我来说，它似乎很不清楚。我无法得到什么问题？

我想唯一的问题是如何生成轴的动态余量。

但即使这个问题没有明确要求和预期的结果不好描述。

因此，这里有我的猜测：

shift = -25; //my circle is 50px width 
 
      //so for the 1st axel if distance=0 
 
      //circle must be shifted to the left by -25px 
 
viewWidth = 800; 
 

 
axles = [{distance: 2000}, 
 
     {distance: 8000}, 
 
     {distance: 2000}, 
 
     {distance: 8000}]; 
 
trainWidth = 0; 
 
axles.forEach(function (axle) { 
 
    trainWidth += axle.distance; 
 
}); 
 

 
width = Math.round(800*trainWidth/25000); 
 

 
$('#train h2').text(""+(Math.round(trainWidth/10)/100)+"m"); 
 

 
unusedLeft = Math.round((viewWidth - width)/2); 
 
unusedRight = unusedLeft; 
 
$('#info .leftBox').width(""+unusedLeft+"px"); 
 

 
unusedMeters = Math.round((25000-trainWidth)/10/2)/100; 
 
$('#info .leftBox h3').text(""+unusedMeters+"m"); 
 
$('#info .rightBox h3').text(""+unusedMeters+"m"); 
 

 
$('#info .rightBox').width(""+unusedRight+"px"); 
 

 
$('#train').width(""+width+"px"); 
 

 
$('#axels').width(""+width+"px"); 
 

 

 

 
idx = 0; 
 
d = 0; 
 
div = ''; 
 

 
axles.forEach(function (axle) { 
 
    idx++; 
 
    d += axle.distance; 
 
    axle.idx = idx; 
 
    margin = shift + Math.round(d*width/trainWidth); 
 
    axle.margin = margin; 
 
    div += '<div id="axel'+idx+'" style="margin-left: '+margin+'px ;" class="axel circle"></div>'; 
 
    
 
}); 
 

 
$('#axles').append(div);//.marginLeft(""+margin+"px");

h2, h3 { 
 
    text-align:center; 
 
    margin:2px auto; 
 
} 
 

 
.container { 
 
    width:800px; 
 
    height:400px; 
 
    border: solid 1px red; 
 
} 
 

 
#info { 
 
    width:800px; 
 
    height:20px; 
 
    border: none; 
 
    position:relative; 
 
} 
 

 
#info .leftBox { 
 
    left:0; 
 
    top:0; 
 
    height:20px; 
 
    width:75px; 
 
    border-bottom: 1px solid blue; 
 
    position:absolute; 
 
} 
 
#info .rightBox { 
 
    right:0; 
 
    top:0; 
 
    height:20px; 
 
    width:75px; 
 
    border-bottom: 1px solid blue; 
 
    position:absolute; 
 
} 
 
#train { 
 
    margin:3px auto; 
 
    width:650px; 
 
    height:200px; 
 
    background:black; 
 
    vertical-align:middle; 
 
    color:#FFFFFF; 
 
} 
 
#train h2{ 
 
    margin:auto auto; 
 
    line-height:200px; 
 
    color:#FFFFFF; 
 
} 
 

 
#axles { 
 
    width:650px; 
 
    height:50px; 
 
    margin: 1px auto; 
 
    border: none; 
 
    position:relative; 
 
} 
 

 
.axel { 
 
\t position: absolute; 
 
    float:left; 
 
} 
 
.circle { 
 
\t width: 50px; height: 50px; 
 
\t border-radius: 50%; 
 
\t background: lightblue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="container"> 
 
    <h2>25m</h2> 
 
    <hr /> 
 
    <div id="info"> 
 
    <div class="leftBox"><h3>2.5m</h3></div> 
 
    <div class="rightBox"><h3>2.5m</h3></div> 
 
    </div> 
 
    <div id="train"> 
 
    <h2>20m</h2> 
 
    </div> 
 
    <div id="axles"> 
 
    
 

 
    </div>

它只用JS做了，现在，我只想澄清如何设置动态利润率和元素的宽度。

axles = [{distance: 2000}, 
     {distance: 2000}, 
     {distance: 2000}, 
     {distance: 2000}, 
     {distance: 2000}, 
     {distance: 2000}, 
     {distance: 2000}, 
     {distance: 2000}]; 

http://codepen.io/anon/pen/QbwRMJ

Answer 2

OOP是为这种类型的功能而创建的。 我会给你一个小例子，我将如何建立这个。这个例子只给出了一个提示如何去做，但这个基础知识已经是一种非常灵活的方式来构建它。我没有对它进行测试，但我知道这个原理是有效的，这就是这个例子的用处。

/* 
    A wheel pattern is an ordering of a group of wheels and the required CSSclasses for each or all wheels. 
*/ 
interface iWheelGroup{ 
    public function getPattern(); 
} 


class BasePattern implements iWheelGroup{ 
    protected $pattern; 

    public function __construct($pPattern){ 
     $this->pattern = $pPattern; 
    } 


    public function getPattern(){ 
     return $this->pattern; 
    } 

    public function __toString(){ 
     $tmp = ""; 
     if(is_null($this->getPattern()) === true){ 
      return $tmp; 
     } 
     $arClasses = explode('_&_', $this->getPattern()); 
     $max = count($arClasses); 
     for($i=0;$i<$max;$i++){ 
      $tmp .= "<img class=\"".$arClasses[$i]."\" > "; 
     } 
     $tmp .= "\n"; 
     return $tmp; 
    } 
} 


class WheelAndPattern extends BasePattern{ 
    protected $wheels; 

    public function __construct($pWheels, $pPattern){ 
     $this->$wheels = $pWheels; 
     parent::__construct($pPattern); 
    } 


    public function getWheels(){ 
     return $this->wheels; 
    } 

    public function __toString(){ 
     $tmp = ""; 
     if(is_null($this->getPattern()) === true || is_null($this->getWheels() === true)){ 
      return $tmp; 
     } 
     $arClasses = explode('_&_', $this->getPattern()); 
     $max = count($arClasses); 

     $arWheeltypes = explode('_&_', $this->getWheels()); 
     $maxWheels = count($arWheeltypes); 
     if($max === $maxWheels){ 
      for($i=0;$i<$max;$i++){ 
       $tmp .= "<img class=\"".$arClasses[$i]."\" src=\"".$arWheeltypes[$i]."\> "; 
      } 
     }else{ 
      for($i=0;$i<$max;$i++){ 
       $tmp .= "<img class=\"".$arClasses[$i]."\" src=\"".$arWheeltypes[0]."\> "; 
      } 
     } 
     $tmp .= "\n"; 
     return $tmp; 
    } 
} 

$wg = new BasePattern('wheelsleft_&_wheelsleft_&_wheelsright_&_wheelsright'); 
$wg2= new WheelAndPattern('openWheel','wheelseven_&_wheelseven_&_wheelseven'); 
$wg3= new WheelAndPattern('blackWheel_&_greyWheel_&_whiteWheel','wheelsleft_&_wheelscenter_&_wheelsright'); 
print $wg.$wg2.$wg3;