jquery Append Funktionalität ungeordnet die HTML-Layout

Ich bin auf einem kleinen Projekt zu arbeiten: (Rechner), Phase 1 -> die Vorlage fertig machen
jquery mit & Bootstrapjquery Append Funktionalität ungeordnet die HTML-Layout

Das Problem erschien, als ich ein großes setzen Nummer innerhalb des Zielcontainers mit jquery.append, das Layout wird ungeordnet, jede Idee, wie das zu beheben .. ??

Dies ist der Code:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
<title>Bootstrap 101 Template</title> 

<!-- Bootstrap --> 
<link href="css/bootstrap.min.css" rel="stylesheet"> 

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
<!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
<!--[if lt IE 9]> 
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js></script> 
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
<![endif]--> 
</head> 
<body> 
<div class="row"> 
    <div class="container-fluid"> 

    <div class="col-xs-4 col-xs-offset-4"> 
     <div class="row well" id="result" style="margin-top: 15px; min-height: 85px;"> <!-- this is the container --> 
     <span style="font-size: 32px; font-weight: bold;"></span> 
     </div> 
     <div class="col-xs-9" style="margin-bottom: 15px;"> 
     <div class="col-xs-4"> 
      <button type="button" class="btn btn-primary btn-block"> ² </button> 
     </div> 
     <div class="col-xs-4"> 
      <button type="button" class="btn btn-primary btn-block"> Exp() </button> 
     </div> 
     <div class="col-xs-4"> 
     <button type="button" class="btn btn-primary btn-block"> Log() </button> 
     </div> 
     </div> 
     <div class="col-xs-9"> 
     <?php for($i=0; $i<=9; $i++) 
     {?> 

     <div class="col-xs-4" style="margin-bottom: 15px;"> 
       <button type="button" class="btn btn-default btn-block num" data-num="<?php echo $i; ?>"> <?php echo $i; ?> </button> 
     </div> 

     <?php } 
     ?> 
     <div class="col-xs-4" style="margin-bottom: 15px;"> 
       <button type="button" class="btn btn-danger btn-block"> C </button> 
     </div> 
     <div class="col-xs-4" style="margin-bottom: 15px;"> 
       <button type="button" class="btn btn-info btn-block"> = </button> 
     </div> 
     </div> 
     <div class="col-xs-3"> 
     <button type="button" class="btn btn-success btn-block opper" data-op="+"> + </button> 
     <button type="button" class="btn btn-success btn-block opper" data-op="-"> - </button> 
     <button type="button" class="btn btn-success btn-block opper" data-op="/">/</button> 
     <button type="button" class="btn btn-success btn-block opper" data-op="x"> x </button> 
     </div> 
    </div> 


    </div> 
</div> 

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="js/bootstrap.min.js"></script> 

<script> 
    $(function() { 

    $(".num").click(function() { 
     var num = $(this).data('num'); 
     $('#result span').append(num); 

    }); 

    $(".opper").click(function() { 
     var op = $(this).data('op'); 
     $('#result span').append(op); 

    }); 

    }); 
</script> 
</body> 
</html>

Quelle

2016-07-09 Abdessamad Ezaimi

Was meinst du mit ‚ungeordneten‘? Abgesehen von der Notwendigkeit, die Länge zu begrenzen oder das Display zu scrollen, scheint es in Ordnung zu sein: https://jsfiddle.net/RoryMcCrossan/232v8c9d/ –

, wenn Sie eine große Zahl setzen. die Zahlen gehen aus dem Container –

@AbdessamadEzaimi Wird es gut, wenn der Text in der nächsten Zeile fortgesetzt wird? –

wenn Sie eine große Zahl setzen. die Zahlen steigen aus dem Behälter

In diesem Fall können Sie die span enthalten die Zahlen festlegen müssen blättern, wenn eine große Zahl eingegeben wird, die Sie mit dem folgenden CSS tun können:

#result span { 
    display: inline-block; 
    width: 100%; 
    text-align: right; 
    overflow: auto; 
}

Example fiddle

Alternativ können Sie die JS ändern, um die Anzahl der Zeichen zu begrenzen, die eingegeben werden können:

$(".num").click(function() { 
    var num = $(this).data('num'); 
    var $span = $('#result span') 
    if ($span.text().length <= 10) 
     $span.append(num) 
}); 

$(".opper").click(function() { 
    var op = $(this).data('op'); 
    var $span = $('#result span') 
    if ($span.text().length <= 10) 
     $span.append(op) 
});

Example fiddle

Persönlich würde ich das letztere verwenden.

Beachten Sie auch, dass Sie die beiden Funktionslader in einem beitreten können:

$(".num, .opper").click(function() { 
    var value = $(this).data($(this).hasClass('num') ? 'num' : 'op'); 
    var $span = $('#result span') 
    if ($span.text().length <= 10) 
     $span.append(value) 
});

Quelle

2016-07-09 15:01:56

thx, das funktioniert gut –

@AbdessamadEzaimi Denken Sie daran, dies zu akzeptieren, um die Antwort zu korrigieren, sobald Sie können. –

jquery Append Funktionalität ungeordnet die HTML-Layout

Antwort

Verwandte Themen