0

我有一个页面，您可以在其中邀请团队。单击“邀请团队”会出现一个显示搜索输入的弹出框。搜索功能基于 AJAX。当通过您的搜索词找到一个团队时，您必须单击该团队，然后该团队将显示在“受邀团队”框中。

它的工作方式是，当您“添加”团队时，会生成一个隐藏的输入字段，其中包含团队的 ID 作为值。问题是，使用我当前的代码，可以根据需要多次添加同一个团队。如果可以在隐藏输入数据中找到团队，我应该可以检查。如果它已经存在，那么应该不可能添加理智的团队。

我当前的 javascript 代码可以在下面找到。请注意，我已尝试编写检查团队的代码，但它不起作用。

function addTeam(tid) {
    // Grab the input value
    var teamName = document.getElementById(tid).innerHTML;
    var teamID = document.getElementById(tid).id;

    // If empty value
    if(!teamName || !teamID) {
        alert('An error occured.');
    } else {
        //Tried to do the "team-adlready-added"-test, but it doesn't work
        var stored_teams = $t('#store-teams').getElementsByTagName('input');
        for (var i = 0; i < stored_teams.length; i++) {
            var stored_team = stored_teams[i];
            if(stored_team.value == teamID) {
                break;
                var team_already_added = 1;
            }
            alert(team_already_added);
        }
        if((team_already_added) || team_already_added != 1) {
            // Store the team's ID in hidden inputs
            var store_team = document.createElement('input');
            store_team.type = 'hidden';
            store_team.value = teamID;

            // Append it and attach the event (via onclick)
            $t('#store-teams').appendChild(store_team);             

            // Create the teams with the value as innerHTML
            var div = document.createElement('div');
            div.className = 'team-to-invite';
            div.innerHTML = teamName;

            // Append it and attach the event (via onclick)
            $t('#teams').appendChild(div);
        }
        div.onclick = removeTeam;
    }
    return false;
}

提前致谢。

4

2 回答 2

1

我只是想给你一个没有 html 元素的可能解决方案的提示。

您可以为团队创建一个新的功能对象：

var Team = function (id, name) {
    this.name = name;
    this.id = id;
}

创建一个包含团队的数组：

var TeamList = [];

添加您的团队：

TeamList.push(new Team(1, "Team 1"));
TeamList.push(new Team(2, "Team 2"));
TeamList.push(new Team(3, "Team 3"));
TeamList.push(new Team(4, "Team 4"));

编写一个循环遍历团队列表的函数，并检查团队是否已经存在：

function containsTeam(id) {
    for (var i = 0; i < TeamList.length; i++) {
        if (TeamList[i].id == id) {
            return true;
        }
    }
    return false;
}

只需检查一下：

containsTeam(1); //returns true
containsTeam(5); //returns false

查看jsFiddle DEMO并打开控制台查看输出。

编辑：此外，要删除一个元素，您可以编写一个看起来与 containsTeam 函数几乎相同的函数。只需使用array.splice而不是返回 true：

function removeTeam(id) {
    for (var i = 0; i < TeamList.length; i++) {
        if (TeamList[i].id == id) {
            TeamList.splice(i, 1);
        }
    }
}

并删除一个团队：

removeTeam(3);
于 2013-05-24T20:53:29.843 回答
0

您的变量范围已关闭。您声明团队已经添加到错误的位置。用团队名称和团队 ID 声明它，它会让你朝着正确的方向前进

于 2013-05-24T20:19:55.907 回答