Question

我有一个页面，您可以邀请团队。单击“邀请团队”会出现一个弹出框，显示搜索输入。搜索功能是基于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;
}

提前致谢。

Answer 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"));

编写一个循环通过团队列表的函数，如果团队已经存在，则使用id进行检查：

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

Answer 2

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

检查团队是否已添加

2 个答案: