Javascript 仅当div has class`处于活动状态时才向输入添加文本` 问题 未被选择的玩家，即未拾取类别。当单击这些玩家时，不应将其添加到任何输入字段中 每类球员最多可挑选4名守门员中的2名，15名防守队员中的6名，31名前锋中的12名 更新#3

在此处添加了指向Github回购的链接：

更新#2 添加了代码段，它显示了如何切换

是非活动的

和

是活动的

类

更新#1-

---

我已经删除了第二个片段，这可能会引起一些混乱

下面的Javascript代码片段获取所单击的播放器的名称，然后将其放入一个输入字段中，如果它有一个类

。处于活动状态

。但是，假设您已经选择了两名守门员，但在未选中时单击该类别中剩余的两名守门员（将默认类别设置为活动状态））未选中的球员仍会添加到输入中，这不是我们想要的。

---

scripts.js-此代码段需要修复，当前将玩家名称添加到输入字段，即使已达到特定类别中玩家的最大数量 scripts.js（如何切换

处于非活动状态

和

处于活动状态

类）

$（“.btn--random”）.on（“单击”，函数（）{
//核对这些数字
var goalies_array=getRandomNumbers（1,4,2）；
var defensemen_数组=getRandomNumbers（5,19,6）；
var\u数组=getRandomNumbers（20,50,12）；
$（“.goalies”）.text（goalies_array.join（“，”）；
$（“.defensemen”）.text（defensemen_数组.join（“，”）；
$（“.forwards”）.text（forwards\u array.join（“，”）；
var players_array=守门员_array.concat（防守队员_array）.concat（前锋_array）；
//根据生成的数字添加类'is active'
var player=$（“.player”）；
$（.is active”）.removeClass（“is active”）.addClass（“is inactive”）；
$.each（玩家\数组、函数（索引、值）{
var player_index=value-1；//基于零索引减去1
player.eq（player_index.find（“.is inactive”）.removeClass（“is inactive”）.addClass（“is active”）；
});
});
函数GetRandomNumber（开始、结束、数量）{
var-arr=[]；
对于（var i=start，j=0；i而言，将应用程序状态存储到dom/html元素中不是实现业务的好方法。您应该真正使用数据对象来保存应用程序状态。但是，假设您的播放器名称是唯一的，下面将对每个类别强制执行最大计数约束

(function () {
    var maxCounts = {
        forward: 12,
        defenceman: 6,
        goalie: 2
    };

    var getSelectePlayerNames = function () {
        var names = [];
        $("input:text").each(function (i, t) {
            t.value && names.push(t.value);
        });

        return names;
    };
    var getPlayerPositionCounts = function (players) {
        var $players = $('.player');
        var positions = [];
        $.each(players, function (i, player) {
            positions.push($players.find(".player__name:contains('" + player + "')").next().text().toLowerCase());
        });

        return positions.reduce(function (memo, val) {
            memo[val]++;
            return memo;
        }, { forward: 0, defenceman: 0, goalie: 0 });
    };

    $(".player").on("click", function () {
        var $el = $(this);

        var playerName = $el.find(".player__name").text();
        var selectedPlayerNames = getSelectePlayerNames();
        var index = selectedPlayerNames.indexOf(playerName);
        if (index > -1) {
            $("input:text:eq(" + index + ")").val("");

            return;
        }

        if (!$el.find(".picked.is-active").length) {
            return;
        }

        var playerPosition = $el.find(".player__position").text().toLowerCase();
        var selectedPositionCounts = getPlayerPositionCounts(selectedPlayerNames);
        if (selectedPositionCounts[playerPosition] < maxCounts[playerPosition]) {
            $("input:text:eq(" + selectedPlayerNames.length + ")").val(playerName);
        }
    });
})();

（函数（）{
变量最大计数={
转发：12，
辩护人：6，
守门员：2
};
var getSelectePlayerNames=函数（）{
变量名称=[]；
$（“输入：文本”）。每个（函数（i，t）{
t、 value&&name.push（t.value）；
});
返回姓名；
};
var getPlayerPositionCounts=函数（玩家）{
变量$players=$（'.player'）；
var头寸=[]；
$。每个（玩家，功能（i，玩家）{
positions.push（$players.find（“.player\u name:contains（““+player+”）”）））.next（）.text（）.toLowerCase（）；
});
返回位置。减少（功能（备注、val）{
备忘录[val]++；
返回备忘录；
}，{前锋：0，防守队员：0，守门员：0}）；
};
$（“.player”）。在（“单击”，函数（）{
var$el=$（本）；
var playerName=$el.find（“.player__name”）.text（）；
var selectedPlayerNames=getSelectePlayerNames（）；
var指数=选定的玩家名称。indexOf（玩家名称）；
如果（索引>-1）{
$（“输入：文本：eq（“+index+”））.val（“”）；
返回；
}
if（！$el.find（“.picked.is active”）.length）{
返回；
}
var playerPosition=$el.find（“.player__位置”）.text（）.toLowerCase（）；
var selectedPositionCounts=getPlayerPositionCounts（selectedPlayerNames）；
如果（已选择位置计数[playerPosition]<最大计数[playerPosition]）{
$（“输入：文本：eq（“+selectedplayername.length+”）.val（playerName）；
}
});
})();
我不太明白。显示的两个代码段都为class
player
元素添加了一个单击侦听器。因此它们将同时运行…但是您首先需要计算所选的代码，然后才尝试添加到输入字段，对吗？我删除了第二个代码段，这可能会引起一些混乱。这是第一个代码段抓取被点击球员的名字，然后将其放入一个输入字段，如果它有一个被选中的
类。处于活动状态
。但是，假设你已经选择了两个守门员，但是在未被选中时，点击该类别的两个守门员（让默认类
处于活动状态
）那些未被选中的玩家仍然会被添加到输入中，这不是我们想要的want@fmilani这有帮助吗？Andrew，我注意到了一些可能是问题所在：在if子句中
if（$（this.find）（“picked.is active”））
，您正在测试jquery的返回，根据文档，它返回一个jquery集合，它总是真实的。也许您应该更改为
if（$（this）.find（“picked.is active”）。length>0）
@fmilani这可能很接近，但是向该部分添加
.length>0
会使所有名称不会在单击时显示。想法？这将替换我的部分代码还是只是添加到其中？它将替换哪个部分，因为我发布了第一个代码段的两个Javascript代码段。现在，当我删除第一个代码段并放入您的s、 输入字段中不显示播放器的名称。这是我的脚本文件当前的外观：
$(".btn--random").on("click", function() {

    // CHECK THESE NUMBERS
    var goalies_array = getRandomNumbers(1, 4, 2);
    var defensemen_array = getRandomNumbers(5, 19, 6);
    var forwards_array = getRandomNumbers(20, 50, 12);

    $(".goalies").text(goalies_array.join(","));
    $(".defensemen").text(defensemen_array.join(","));
    $(".forwards").text(forwards_array.join(","));

    var players_array = goalies_array.concat(defensemen_array).concat(forwards_array);

    // Add the class `is-active` based on the numbers generated
    var player = $(".player");
    $(".is-active").removeClass("is-active").addClass("is-inactive");


    $.each(players_array, function(index, value) {
      var player_index = value - 1; // Subtract one based on zero-indexing
      player.eq(player_index).find(".is-inactive").removeClass("is-inactive").addClass("is-active");
  });
});

function getRandomNumbers(start, end, howMany) {
    var arr = [];
    for (var i = start, j = 0; i <= end; j++, i++)
        arr[j] = i
    arr.sort(function() {
        return Math.floor((Math.random() * 3) - 1)
    });

    return arr.splice(0, howMany)
}

    <form id="form">
        <input type="text" name="p1"  id="p1">
        <input type="text" name="p2"  id="p2">
        <input type="text" name="p3"  id="p3">
        <input type="text" name="p4"  id="p4">
        <input type="text" name="p5"  id="p5">
        <input type="text" name="p6"  id="p6">
        <input type="text" name="p7"  id="p7">
        <input type="text" name="p8"  id="p8">
        <input type="text" name="p9"  id="p9">
        <input type="text" name="p10" id="p10">
        <input type="text" name="p11" id="p11">
        <input type="text" name="p12" id="p12">
        <input type="text" name="p13" id="p13">
        <input type="text" name="p14" id="p14">
        <input type="text" name="p15" id="p15">
        <input type="text" name="p16" id="p16">
        <input type="text" name="p17" id="p17">
        <input type="text" name="p18" id="p18">
        <input type="text" name="p19" id="p19">
        <input type="text" name="p20" id="p20">

        <button class="btn btn--submit" type="submit"><img src="src/img/ballot-alt.png" class="image--ballot">Submit Vote</button>
    </form>

        <div class="player player--forward year--2000 year--2010">
            <div class="tooltip">
                <p class="tooltip__name">Mark Stone</p>
                <p class="tooltip__hometown"><span>Hometown:</span> Winnipeg, Man.</p>
                <p class="tooltip__years"><span>Years Played:</span> 2008-2012</p>
                <div class="tooltip__stats--inline">

                    <div class="stats__group stats--games">
                        <p class="stats__header">GP</p>
                        <p class="stats__number stats__number--games">232</p>
                    </div>

                    <div class="stats__group stats--goals">
                        <p class="stats__header">G</p>
                        <p class="stats__number stats__number--goals">106</p>
                    </div>

                    <div class="stats__group stats--assists">
                        <p class="stats__header">A</p>
                        <p class="stats__number stats__number--assists">190</p>
                    </div>

                    <div class="stats__group stats--points">
                        <p class="stats__header">Pts</p>
                        <p class="stats__number stats__number--points">296</p>
                    </div>

                    <div class="stats__group stats--penalties">
                        <p class="stats__header">Pim</p>
                        <p class="stats__number stats__number--penalties">102</p>
                    </div>
                </div>
            </div>
            <div class="player__headshot player--mstone">
                <div class="picked is-inactive"><i class="fa fa-star" aria-hidden="true"></i></div>
            </div>
            <p class="player__name">Mark Stone</p>
            <p class="player__position">Forward</p>
        </div>

(function () {
    var maxCounts = {
        forward: 12,
        defenceman: 6,
        goalie: 2
    };

    var getSelectePlayerNames = function () {
        var names = [];
        $("input:text").each(function (i, t) {
            t.value && names.push(t.value);
        });

        return names;
    };
    var getPlayerPositionCounts = function (players) {
        var $players = $('.player');
        var positions = [];
        $.each(players, function (i, player) {
            positions.push($players.find(".player__name:contains('" + player + "')").next().text().toLowerCase());
        });

        return positions.reduce(function (memo, val) {
            memo[val]++;
            return memo;
        }, { forward: 0, defenceman: 0, goalie: 0 });
    };

    $(".player").on("click", function () {
        var $el = $(this);

        var playerName = $el.find(".player__name").text();
        var selectedPlayerNames = getSelectePlayerNames();
        var index = selectedPlayerNames.indexOf(playerName);
        if (index > -1) {
            $("input:text:eq(" + index + ")").val("");

            return;
        }

        if (!$el.find(".picked.is-active").length) {
            return;
        }

        var playerPosition = $el.find(".player__position").text().toLowerCase();
        var selectedPositionCounts = getPlayerPositionCounts(selectedPlayerNames);
        if (selectedPositionCounts[playerPosition] < maxCounts[playerPosition]) {
            $("input:text:eq(" + selectedPlayerNames.length + ")").val(playerName);
        }
    });
})();