định vị bằng tỷ lệ phần trăm trong một foreach

Question

Tôi có một trang đó trông như thế này ngay bây giờ:

và mã cho điều này là:

<?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> 

Và 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; 
} 

Phải. Vì vậy, tôi làm cho chiều rộng của hình ảnh tùy thuộc vào tổng của cơ sở dữ liệu. Ví dụ. Mỗi vòng tròn bạn nhìn thấy (4 trong trường hợp này) có một khoảng cách. Soo:

• trục 1 = 2000
• trục 2 = 8000
• trục 3 = 2000
• trục 4 = 8000

Trong tổng số này là 20.000mm 20.000mm = 20 mét . Vì vậy, chuyến tàu này dài 20 mét. Bây giờ tôi mở rộng này xuống percantages: (Xem hình ảnh chiều rộng)

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(); 
    } 

Ở đây tôi nói rằng 100% là 25.000mm (25meter). Bây giờ tôi cũng cần điều này cho vị trí trục.
Vì vậy, trục 1 = ví dụ 10% tổng số. Vì vậy, tôi cần nó là 10% bên trái (Lề)
trục 2 = 5%. Vì vậy, tôi cần trục 1 + 5% = 15% ở bên trái. , vv

Mỗi trục có ID riêng của mình (Đây là hình ảnh DB)

Vì vậy, cuối cùng tôi muốn kết quả cuối cùng cần để trông giống như một con tàu nhỏ. (Vì vậy, 2 trục đầu tiên còn lại và 2 trục cuối cùng bên phải) dưới hình ảnh tàu hỏa. Như sau:

Answer 1

Tôi không biết tại sao có quá nhiều người tán thành câu hỏi này.

Đối với tôi, có vẻ như rất không rõ ràng. Tôi không thể có được câu hỏi là gì?

Tôi đoán câu hỏi duy nhất là làm thế nào để tạo ra lợi nhuận năng động cho trục.

Nhưng ngay cả câu hỏi này đã không hỏi rõ ràng và kết quả mong đợi không được mô tả tốt.

Vì vậy, đây là tôi đoán:

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>

Nó được thực hiện chỉ với JS cho bây giờ, chỉ cần làm rõ làm thế nào để thiết lập lề năng động và độ rộng của các yếu tố.

Vì vậy, bạn có thể chơi với đoạn này chỉ bằng cách chnaging giá trị của axles như:

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 là imho được tạo cho loại chức năng này. Tôi sẽ cung cấp cho bạn một ví dụ nhỏ như thế nào tôi sẽ xây dựng này. Ví dụ này cung cấp cho bạn chỉ một gợi ý làm thế nào để làm điều đó, nhưng điều cơ bản này đã là một cách rất linh hoạt để xây dựng nó lên. Tôi đã không thử nghiệm nó, nhưng tôi biết rằng nguyên tắc hoạt động và đó là nơi mà ví dụ này được thực hiện cho.

/* 
    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;