0

チームを招待できるページがあります。[チームを招待] をクリックすると、検索入力を示すポップアップ ボックスが表示されます。検索機能は AJAX ベースです。検索ワードでチームが見つかったら、チームをクリックする必要があります。チームが「招待されたチーム」ボックスに表示されます。

チームを「追加」すると、チームの ID を値として含む非表示の入力フィールドが生成されるように機能します。問題は、私の現在のコードでは、同じチームを何度でも追加できることです。チームがhidden-input-dataで見つかるかどうかを確認できるはずです。すでに存在する場合、正気のチームを追加することはできないはずです。

現在の 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"));

チームのリストをループし、チームが既に存在するかどうかを 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.splicetrueを返す代わりに使用してください：

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 に答える