我想編寫一個程序來將高度設置爲四個分割。通過jQuery在特殊條件下設置分割高度
四個分區的高度將被設置爲等於四個分區的最大高度。
我已經使用twitter bootstrap只是爲了設計目的。
在這種情況下,由於高度與id=four
具有最大高度,所有其餘三個部門應該設置高度。下面
是html代碼
<!DOCTYPE html>
<html lang="en">
<head>
<title>
</title>
<meta charset="utf-8" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div id="one" class="col-lg-3 col-md-3 col-sm-3 well">
<p>Line one<p>
</div>
<div id="two" class="col-lg-3 col-md-3 col-sm-3 well">
<p>Line one<p>
<p>Line two<p>
</div>
<div id="three" class="col-lg-3 col-md-3 col-sm-3 well">
<p>Line one<p>
<p>Line two<p>
<p>Line three<p>
</div>
<div id="four" class="col-lg-3 col-md-3 col-sm-3 well">
<p>Line one<p>
<p>Line two<p>
<p>Line three<p>
<p>Line four<p>
</div>
</div>
</div>
<!-- Latest compiled JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/custom.js" ></script>
</body>
</html>
下面是代碼custom.js
$(document).ready(function(){
var one1 = $('#one').height();
var two2 = $('#two').height();
var three3 = $('#three').height();
var four4 = $('#four').height();
var greatestDiv = "";
if(one1 > two2 && one1 > three3 && one1 > four4){
greatestDiv = $('#one').height();
$('#one').height(greatestDiv);
}
if(two2 > one1 && two2 > three3 && two2 > four4){
greatestDiv = $('#two').height();
$('#two2').height(greatestDiv);
}
if(three3 > one1 && three3 > two2 && three3 > four4){
greatestDiv = $('#three').height();
$('#three3').height(greatestDiv);
}
if(four4 > one1 && four4 > two2 && four4 > three3){
greatestDiv = $('#four').height();
$('#four4').height(greatestDiv);
}
});
我在jQuery的初學者。有關任何疑問或誤解,請在下面留言。