将 Bootstrap 页重新排列为三列，每列下有一个项目

我有一个小工具，让Scrum团队跟踪会议中的人。现在我们有更多的人，一个团队被添加，现在似乎更合乎逻辑的重新安排元素。
现在，如果您单击team 1/team 2/team 3按钮，名称将被分为3列，并且彼此相邻。我想将其更改为3列，但每个团队都将有自己的列。因此，team 1的名称将填充第一列，而此团队中的名称将彼此相邻。之后，如果我单击team 2，team 2的名字将填充第二列，team 3将填充第三列。我假设在每次单击team按钮时，脚本都应创建一列并填充此列，在第二次单击team按钮时，它将再次在第一列旁边创建一列，第三次也是如此。这可能吗？非常感谢。
这是一页的工作版本，所有的名字都是随机生成的，完全匿名：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Team Members</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

    <style>
        .footer {
            position: fixed;
            left: 0;
            bottom: 0;
            right: 0;
            z-index: 10;
        }

        .alert.member-clicked {
            text-decoration-line: line-through;
            background-color: #ddd;
            border-color: #ddd;
        }
        
        .alert.member-absent {
            text-decoration-line: line-through;
            background-color: #f8d7da;
            border-color: #f8d7da;
        }

        .copyright {
            margin-top: 10px;
            margin-right: 10px;
            text-align: right;
        }

        .form-inline.form-members .input-group {
            display: inline-table;
            vertical-align: middle;
        }
        .form-inline.form-members .input-group .input-group-btn {
            width: auto;
        }
        
        h2 {
            margin-bottom: 20px;
        }
    </style>

</head>

<body>
    <center>

<div class="container">
    <h2 class="text text-success text-center">My Team Members</h2>
    <div id="memberlist" class="row"></div>
</div>

<footer class="footer">
    <div class="container">
        <!-- Input for members -->
        <div class="form-inline form-members">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Add member" id="text" value="Alasdair Mckee">
                <div class="input-group-btn">
                    <button class="btn btn-success btn-addmember"><i class="glyphicon glyphicon-plus"></i></button>
                </div>
            </div>
            <button class="btn btn-success" data-team="team1"><i class="glyphicon glyphicon-plus"></i> Team1</button>
            <button class="btn btn-success" data-team="team2"><i class="glyphicon glyphicon-plus"></i> Team2</button>
            <button class="btn btn-success" data-team="team3"><i class="glyphicon glyphicon-plus"></i> Team3</button>
        </div>

        <div class="form-group hidden">
            <label for="exampleFormControlTextarea1">Team1</label>
            <textarea class="form-control" id="team1" rows="9">
                Bentley Parrish
                Hunter Pineda
                Ammar Burks
                Tanya Vang
                Aimie Ewing
                Anabella Chan
                Amayah Sparks
                Priyanka Cooke
                Boyd Pacheco
                Mai Lynch
            </textarea>

            <label for="exampleFormControlTextarea1">Team2</label>
            <textarea class="form-control" id="team2" rows="9">
                Alan Rangel
                Ikra Knowles
                Chelsea Avalos
                Aysha Glenn
                Margaret Couch
                Effie Corbett
                Yassin Arias
                Caspian Rice
            </textarea>
            
            <label for="exampleFormControlTextarea1">Team3</label>
            <textarea class="form-control" id="team3" rows="9">
                Armani Curran
                Monica Kemp
                Nur Davis
                Hashir Dodson
                Ty Hagan
                Aariz Rowley
            </textarea>
        </div>

    </div>
    <p class="copyright">Created by: Me • <a href="mailto:me@me.com">me@me.com</a> • ver 1.5</p>
</footer>

    </center>
    <script>
        $(document).ready(function() {

            var memberList = $("#memberlist");

            memberList.on("click", ".alert", function () {
                $(this).toggleClass("member-clicked");
            });

            memberList.on("click", ".close", function () {
                var memberColumn = $(this).parent().parent();
                memberColumn.fadeOut();
            });

            $(".btn-addmember").click(function () {
                var newMember = $("#text").val().trim();
                if (newMember) {
                    addMember(newMember);
                } else {
                    alert("Please, enter the name of the member");
                }
                $("#text").val("");
            });

            $(".btn[data-team]").click(function () {
                addTeam($(this).data("team"));
            });

            function addMember(member) {
                member = member.trim();
                if (member) {
                    memberList.append(
                        `<div class="col-xs-6 col-sm-4"><div class="alert alert-success">` +
                            `<span class="close" aria-label="close">&times;</span><b>` +
                            member +
                            `</b></div></div>`
                    );
                }
            }

            function addTeam(id) {
                var team = $("#" + id)
                    .val()
                    .trim();
                if (team) {
                    var members = team.split("\n");
                    console.log(members);
                    for (var i = 0; i < members.length; i++) {
                        addMember(members[i]);
                    }
                }
            }
            
            $(document).on('dblclick', '.alert', function() {
                $(this).toggleClass("member-absent");
            });
        });
    </script>
</body>

</html>

我认为你需要使用3个成员名单，而不是一个。

var memberList1 = $("#listteam1");
var memberList2 = $("#listteam2");
var memberList3 = $("#listteam3");

这意味着布局将发生变化：

<div class="row">
    <div class="col-xs-6 col-sm-4">
        <h3>Team 1</h3>
        <div class="column" id="listteam1">

        </div>
    </div>
    <div class="col-xs-6 col-sm-4">
        <h3>Team 2</h3>
        <div class="column" id="listteam2">

        </div>
    </div>
    <div class="col-xs-6 col-sm-4">
        <h3>Team 3</h3>
        <div class="column" id="listteam3">

        </div>
    </div>
</div>

此外，addMember需要将列表名称作为参数

function addMember(member, list) {
    member = member.trim();
    if (member) {
        $("#list" + list).append(
            `<div class="alert alert-success">` +
            `<span class="close" aria-label="close">&times;</span><b>` +
            member +
            `</b></div>`
        );
    }
}

请在这里找到完整的脚本：https://pastebin.com/VQEVKCaF

将 Bootstrap 页重新排列为三列，每列下有一个项目

1条答案

相关问题

热门标签

最新问答