picked.is-active的类不应该被点击时添加到任何输入字段在此处添加了指向Github回购的链接：https://github.com/onlyandrewn/wheatkings
添加了代码段，其中显示了is-inactive和is-active类的切换方式。
我删除了可能引起混淆的第二个片段
下面的这个Javascript片段抓取点击的玩家的名字，然后将其放入输入字段，如果它有picked.is-active的类。但是，假设你已经选择了两个守门员，但是当未被选中时，点击该类别中剩余的两个守门员（具有默认的等级in-active）这些未被选中的玩家仍然被添加到输入中，这不是我们想要的。
$(".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("");
}
});
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)
}
<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>
答案 0 :(得分：3)
将应用状态存储到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);
}
});
})();