Positionierung von Prozentsatz in einer foreach

Question

ich eine Seite haben, die jetzt wie dieses Recht aussieht:

und den Code hierfür lautet:

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

Und die 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; 
} 

Richtig. Also mache ich die Breite des Bildes abhängig von der Summe der Datenbank. Also zum Beispiel. Jeder Kreis, den Sie sehen (in diesem Fall 4), hat einen Abstand. Soo:

• Achse 1 = 2000
• Achse 2 = 8000
• Achse 3 = 2000
• Achse 4 = 8000

Insgesamt ist dies 20.000mm 20.000mm = 20 Meter . Also dieser Zug ist 20 Meter. Nun skalieren ich dies auf percantages: (Siehe Bildbreite)

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

Hier i sagen, dass 100% ist 25.000mm (25meter). Jetzt brauche ich das auch für die Achsposition.
Also Achse 1 = zB 10% der Summe. Also ich brauche es 10% auf der linken Seite (Margin)
Achse 2 = 5%. Also brauche ich Achse 1+ 5% = 15% auf der linken Seite. usw.

Jede Achse hat seine eigene ID (hier die DB Bild)

So schließlich möchte ich das Endergebnis wie ein kleiner Zug aussehen muss. (Also die ersten 2 Achsen links und die letzten 2 Achsen rechts) unter dem Zugbild. Gefällt mir:

Answer 1

Ich weiß nicht, warum so viele Leute diese Frage upvoted.

Für mich scheint es sehr unklar. Ich kann nicht verstehen, was ist die Frage?

Ich denke, die einzige Frage ist, wie man dynamische Marge für Achsen erzeugt.

Aber auch diese Frage wurde nicht eindeutig gestellt und das erwartete Ergebnis wird nicht gut beschrieben.

hier sind also meine Vermutung:

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>

Es erfolgt nur mit JS für jetzt, nur um zu klären, wie dynamische Margen und Breiten der Elemente zu setzen.

So können Sie mit diesem Code-Schnipsel spielen nur durch chnaging Wert von axles wie:

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 ist imho für diese Art von Funktionalität erstellt. Ich gebe dir ein kleines Beispiel, wie ich das bauen würde. Das Beispiel gibt Ihnen nur einen Hinweis, wie es geht, aber diese Grundlagen sind bereits eine sehr flexible Möglichkeit, es aufzubauen. Ich habe es nicht getestet, aber ich weiß, dass das Prinzip funktioniert und wofür dieses Beispiel gemacht ist.

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