文章/答案/技术大牛

发布

社区首页 >问答首页 >将引导页重新排列为彼此下面的三列和项

问将引导页重新排列为彼此下面的三列和项
EN

Stack Overflow用户

提问于 2022-08-05 09:45:16

回答 1查看 26关注 0票数 1

我有一个用于scrum团队跟踪会议人员的小工具。现在我们是更多的人，一个团队被增加，现在似乎更符合逻辑重新安排元素。

现在，如果您单击team2 1/team2 2/team2 3按钮，则名称将按3列排序，而则位于彼此的旁边。我想把它改为3列，但是每个团队都会有自己的列。因此，team1名称将填充第一列，而该团队中的名称将在彼此的下出现。之后，如果我单击team2，team2的名称将填充第二列，team3将填充第三列。我假设在每个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>

twitter-bootstrap

javascript

html

css

回答 1

Stack Overflow用户

发布于 2022-08-05 10:21:29

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73247774

复制

相似问题

问将引导页重新排列为彼此下面的三列和项
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将引导页重新排列为彼此下面的三列和项EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将引导页重新排列为彼此下面的三列和项
EN