我正在做一个小元素:(计算器)，第 1 阶段 --> 准备好模板
使用 jquery 和 Bootstrap
当我使用 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>
最佳答案
if you put a big number . the numbers get out of the container
在这种情况下，您需要将包含数字的 span 设置为在输入大量数字时滚动，您可以使用以下 CSS 实现:
#result span {
display: inline-block;
width: 100%;
text-align: right;
overflow: auto;
}
或者您可以修改 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)
});
就我个人而言，我会使用后者。
另请注意，您可以将两个函数处理程序合并为一个:
$(".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 append 功能打乱了 html 布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38282963/