问题
每个职位的最大玩家人数为：
> 4个守门员中的2个
15名防守队员中有6名
> 31个前锋中的12个
我已经到了点击曲棍球运动员的地步,并且该名称被添加到表格中的输入字段,但是如果你已经选择了两个守门员,即有一个是活跃的类,然后点击其他两个未选择的玩家中的一个具有默认的非活动类,当最多只有两个守门员时,该名称仍将被添加到输入中.不幸的是,防守队员和前锋也是如此.
目标
当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个可用播放器中的一个
最佳答案
可能,解决此问题的最简单方法是每次有人点击播放器时重新填充所有输入,而不是尝试填充每次输入一次.这意味着您可以将应用程序状态保存在一个简单易懂的数据结构中,该结构独立于您的DOM / UI,而不是每次发生新事件时都必须查询DOM.
原文链接：https://www.f2er.com/jquery/427775.html这就是我可能会写的.
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();
}
如果您需要支持IE 8或任何其他不支持Array.prototype.reduce的浏览器,则需要以不同方式执行getCurrentPlayerCount.
