定位按百分比在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;