1
我有以下代碼，它使用在此處找到的JQuery支架插件呈現一個支架：http://www.aropupu.fi/bracket/。不過，我想在同一頁面上顯示兩個括號。這段代碼只是呈現哪個支架先被初始化。JQuery支架插件渲染多個錦標賽支架
<html>
<head>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="jquery.bracket.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.bracket.min.css" />
<script>
$(document).ready(function() {
var leftBracket = {
teams: [
["Kansas", "Austin Peay"],
["Colorado", "Connecticut"],
["Maryland", "South Dakota State"],
["California", "Hawaii"],
["Arizona", "Wichita State"],
["Miami (FL)", "Buffalo"],
["Iowa", "Temple"],
["Villanova", "UNC Asheville"],
["Oregon", "Holy Cross"],
["Saint Joseph's", "Cincinnati"],
["Baylor", "Yale"],
["Duke", "UNC Wilmington"],
["Texas", "Northern Iowa"],
["Texas A&M", "Green Bay"],
["Oregon State", "VCU"],
["Oklahoma", "Cal State Bakersfield"]
],
results: [
[
[[105, 79],[67, 74],[79, 74],[66, 77],[55, 65],[79, 72],[72, 70],[86, 56],[91, 52], [78, 76], [75, 79], [93, 85], [72, 75], [92, 65], [67, 75], [82, 68]],
[[73, 61],[73, 60],[57, 65],[68, 87],[69, 64],[64, 71],[88, 92],[81, 85]],
[[79, 63],[69, 92],[82, 68],[63, 77]],
[[59, 64],[68, 80]],
[[1,2]]
]
]
};
var rightBracket = {
teams: [
["North Carolina", "Florida Gulf Coast"],
["USC", "Providence"],
["Indiana", "Chattanooga"],
["Kentucky", "Stony Brook"],
["Notre Dame", "Michigan"],
["West Virginia", "Stephen F. Austin"],
["Wisconsin", "Pittsburgh"],
["Xavier", "Weber State"],
["Virginia", "Hampton"],
["Texas Tech", "Butler"],
["Purdue", "Little Rock"],
["Iowa State", "Iona"],
["Seton Hall", "Gonzaga"],
["Utah", "Fresno State"],
["Dayton", "Syracuse"],
["Michigan State", "Middle Tennessee"]
],
results: [
[
[[83, 67], [69, 70], [99, 74], [85, 57], [70, 63], [56, 70], [47, 43], [71, 53], [81, 45], [61, 71], [83, 85], [94, 81], [52, 68], [80, 69], [51, 70], [81, 90]],
[[85, 66], [73, 67], [76, 75], [66, 63], [77, 69], [61, 78], [82, 59], [75, 50]],
[[101, 86], [61, 56], [84, 71], [60, 63]],
[[88, 74], [62, 68]],
[[2, 3]]
]
]
};
$(function() {
$('div#leftBracket').bracket({
init: leftBracket,
skipConsolationRound: true,
});
$('div#rightBracket').bracket({
init: rightBracket,
skipConsolationRound: true,
dir: 'rl',
});
})
});
</script>
</head>
<body>
<div id="leftBracket" />
<div id="rightBracket" />
</body>
的目標是創建一個瘋狂三月支架，但我似乎無法弄清楚如何在類似於瘋狂三月支架是如何格式通常的方式格式化支架（雙方因爲有64支球隊，而且中間球員聚集在一起）。我可以創建一個大支架，所有64支球隊最初都在一邊，但這看起來很笨拙。
有沒有辦法使用這個插件呈現支架兩側，還是有更好的插件，我可以使用。我怎樣才能做到這一點？