仅当div具有类"is active"时，才将文本添加到输入中

Question

问题

• 未被选中的玩家，即没有picked.is-active类的玩家，在点击时不应添加到任何输入字段中
• 从每个类别中挑选的球员最多为4名守门员中的2名、15名防守队员中的6名和31名前锋中的12名

更新#3

在此处添加了Github repo的链接：https://github.com/onlyandrewn/wheatkings

更新#2

添加了这个片段，它显示了如何切换is-inactive和is-active类。

更新#1-

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

下面的这个Javascript片段获取被点击的播放器的名称，然后将其放入一个输入字段中，如果它有一个picked.is-active类的话。然而，假设您已经选择了两名守门员，但在未选择时单击该类别中剩下的两名守门员(具有默认类别in-active(这些未选择的球员仍然会被添加到输入中，这不是我们想要的

---

scripts.js-这个片段需要修复，目前即使达到了特定类别中玩家的最大数量，也会将玩家名称添加到输入字段中

$(".player").on("click", function(){
    var playerNames = [];
    $("input:text").each(function(i, t) { playerNames.push(t.value) });
    if ($(this).find("picked.is-active")) {
        var playerName = $(this).find(".player__name").html();
        var index = playerNames.indexOf(playerName);
        if(index == -1) // add player
            $("input:text:eq(" + playerNames.indexOf("") + ")").val(playerName);
        else // remove player
            $("input:text:eq(" + index + ")").val("");
    } else {
        $("input").val("");
    }
});

scripts.js(如何切换is-inactive和is-active类(

$(".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)
}

index.html(表单片段(

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

index.html(播放器片段(

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

Answer 1

将应用程序状态存储到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);
        }
    });
})();