if语句添加使用`is-inactive`类的玩家输入的问题

Question

问题

每个职位的最大玩家人数为:

• 4个守门员中有2个
• 15名防守队员中有6名
• 31个前锋中的12个

我已经达到了点击曲棍球运动员的地步,并且该名称被添加到表格中的输入字段,但是如果你已经选择了两个守门员,即有一个类,is-active然后点击其中一个其他两个具有默认is-inactive类的未选择的玩家,当最多只有两个守门员时,该名称仍会被添加到输入中.不幸的是,防守队员和前锋也是如此.

目标

当starredGoaltenders === maxGoaltenders或者starredDefencemen === maxDefencemen或starredForwards === maxFowards那的球员的名字不未被选择的特定位置,并且不具有is-active类不应该被添加到表单中任何输入.

scripts.js中

    function countSelected() {
        $(".player").on("click", function(){

            // Checks if the maximum number of players have been selected
            // If so, return false and then do nothing
            // If not, the class will toggle from `is-inactive` to `is-active`
            if ($(this).find(".picked.is-inactive.full").length > 0) return false;
            $(this).find(".picked").toggleClass("is-inactive is-active");
            $(".player").removeClass("not-picked");
            $(".player").not(":has(.is-active)").addClass("not-picked");

            // Count the number of players with stars
            var starredGoaltenders = $(".player--goalie").find(".picked.is-active").length;
            var starredDefencemen = $(".player--defencemen").find(".picked.is-active").length;
            var starredForwards = $(".player--forward").find(".picked.is-active").length;

            console.log(starredGoaltenders, starredDefencemen, starredForwards);

            // The number of starred players for each position cannot exceed the following numbers
            var maxGoaltenders = 2;
            var maxDefencemen = 6;
            var maxFowards = 12;

            // If the number of starred players hits its max, a class of `is-completed` is adding to the corresponding checkmark to indicate that the task has been completed
            if (starredGoaltenders === maxGoaltenders) {
                $(".checkmark--goalie").addClass("is-completed");
                $(".player--goalie").find(".picked").addClass("full");
            } else {
                $(".checkmark--goalie").removeClass("is-completed");
                $(".player--goalie").find(".picked.is-inactive").removeClass('full');
            }

            if (starredDefencemen === maxDefencemen) {
                $(".checkmark--defencemen").addClass("is-completed");
                $(".player--defencemen").find(".picked").addClass("full");
            } else {
                $(".checkmark--defencemen").removeClass("is-completed");
                $(".player--defencemen").find(".picked.is-inactive").removeClass('full');
            }

            if (starredForwards === maxFowards) {
                $(".checkmark--forward").addClass("is-completed");
                $(".player--forward").find(".picked").addClass("full");
            } else {
                $(".checkmark--forward").removeClass("is-completed");
                $(".player--forward").find(".picked.is-inactive").removeClass('full');
            }

            // If all the conditions are met show the submit vote button
            if (starredGoaltenders === maxGoaltenders && starredDefencemen === maxDefencemen && starredForwards === maxFowards) {
                $(".btn--submit").show();
                $(".btn--submit").addClass("slideLeft");
            } else{
                $(".btn--submit").hide();
                $(".btn--submit").removeClass("slideLeft");
            }
        });
} countSelected();


// Every time a player is clicked, note the name of the player
$(".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("");
    }
});

index.html - Snippet包含表单以及要点击的60个可用播放器中的一个

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

Answer 1

也许，解决这个问题的最简单方法是每次有人点击玩家时重新填充所有输入，而不是尝试填充每个输入一次。这意味着您可以将应用程序状态保存在独立于 DOM/UI 的简单、易于理解的数据结构中，而不必在每次发生新情况时都查阅 DOM。

我可能会这样写。

var players = [
        {name: 'Ovechkin', type: 'F'},
        {name: 'Dubnyk', type: 'G'}
        // your complete player list goes here
    ],
    selectedPlayers: []; // these are the players the user has chosen


var getCurrentPlayerCount = function (playerType) {
    // return the number of players currently selected of one type
    return selectedPlayers.reduce(function (count, player) {
        if (player.type === playerType) return count + 1;
        return count;
    }, 0);
}

var selectPlayer = function (player) {
    // You call this when someone clicks on a player
    var currentForwardCount = getCurrentPlayerCount('F')
        currentDefenceCount = getCurrentPlayerCount('D'),
        currentGoalieCount = getCurrentPlayerCount('G');

    // Do nothing (or show a UI message) if someone goes over their
    // player-type limit
    if (player.type === 'F' && currentForwardCount > 12) return;
    if (player.type === 'D' && currentDefenceCount > 6) return;
    if (player.type === 'G' && currentGoalieCount > 2) return;

    // If you get here, it means the player can be added, so add
    // it to the user's list
    selectedPlayers.push(player);

    updateUI();
}

我这里不包括在内updateUI。你可以自己解决这个问题。

如果您需要支持 IE 8 或任何其他不支持的浏览器Array.prototype.reduce，则需要采取getCurrentPlayerCount不同的做法。