Question

我正在开展一个小项目:(计算器），阶段1 - ＆gt;准备好模板
使用jquery＆amp;自举

当我使用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>

Answer 1

如果你输了一个大号。数字离开容器

在这种情况下，您需要设置包含数字的span，以便在输入大数字时滚动，您可以使用以下CSS执行此操作：

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

Example fiddle

或者，您可以修改JS以限制可输入的字符数：

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

就个人而言，我会使用后者。

另请注意，您可以将两个函数处理程序连接到一个：

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

jquery追加功能混乱了html布局

1 个答案: