Question

我有以下代码，它使用JQuery Bracket Plugin渲染一个括号：http://www.aropupu.fi/bracket/。但是，我想在同一页面上呈现两个括号。此代码只是渲染首先初始化的括号。

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

目标是创建一个March Madness括号，但我似乎无法弄清楚如何格式化括号的方式类似于march madness括号通常格式化的方式（双方因为有64个团队，而且胜利者聚集在中间）。我可以创建一个大支架，其中所有64支球队最初都在一边，但这看起来很笨拙。

有没有办法使用这个插件渲染两侧的支架，或者是否有一个更好的插件我可以使用。我怎么能做到这一点？

Answer 1

由于您没有关闭<div>元素，因此无法正常工作您必须拥有<div/>而不是<div></div> 你的工作实例： https://jsfiddle.net/omzc95nh/1/

JQuery Bracket插件渲染多个锦标赛括号

1 个答案: