jqueryの追記機能は、私は、小規模なプロジェクトに取り組んでいるHTMLレイアウト

乱れ：（電卓）を、フェーズ1 - >jqueryの追記機能は、私は、小規模なプロジェクトに取り組んでいるHTMLレイアウト

ブートストラップの問題をjqueryの&を使用して
テンプレートが準備私は大きなを入れたときに登場番号はjquery.appendを使用して、ターゲットコンテナ内のレイアウトは、どのようにそれを修正する任意のアイデアが混乱するようになる？

これはコードです：

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

出典

2016-07-09 Abdessamad Ezaimi

あなたが「無秩序」とはどういう意味ですか？長さを制限したり、ディスプレイをスクロールする必要性を除いて、大きな数字を入力するとhttps://jsfiddle.net/RoryMcCrossan/232v8c9d/ –

と表示されます。数字がコンテナから出る –

@AbdessamadEzaimiテキストが次の行に続く場合は問題ありませんか？ –

あなたは大きな数を入れます。
#result span { 
    display: inline-block; 
    width: 100%; 
    text-align: right; 
    overflow: auto; 
} 
：数字は、あなたは以下のCSSで行うことができます、大規模な番号が入力されたときにスクロールする数字を含むspanを設定する必要があります。この場合、コンテナ

から抜け出します

$(".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

別の方法としては、入力できる文字数を制限するために、JSを修正することができます

Example fiddle

個人的には後者を使用します。

はまた、あなたが1に二つの機能ハンドラに参加できることに注意してください。

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

出典

2016-07-09 15:01:56

thx、それはうまく動作します –

@AbdessamadEzaimiできれば答えを訂正するためにこれを受け入れることを忘れないでください。 –

jqueryの追記機能は、私は、小規模なプロジェクトに取り組んでいるHTMLレイアウト

答えて

関連する問題