Objective
- I'm looking at the
.length of each of these positions: .player--forward, .player--defenseman and .player--goalie to see how many of these players have the class is-selected
- A player is selected when a user clicks the
btn--add button to add that player to their team.
- Once a position reaches the maximum number that can be chosen: two forwards
(pickedF === 2) or three defensemen (pickedD === 3) or one goalie (pickedG === 1), I'm looking to make it so any players that have do not have a class is-selected unable to be clicked on with "pointer-events:none"
Problem
- Right now, when I
console.log(pickedF, pickedD, pickedG) it starts it 0-0-0, but the count of players with the class is-selected does not count up properly when btn-add is clicked to select a player and add them to your team. I think the problem might be the if-statement or the behaviour with $("btn-add).unbind("click")
scripts.js
function countPlayers(){
$(".player").click(function(){
var player = $(this); // Select the current player
// Count number of players of each position that have been clicked
var pickedF = $(".player--forward.is-selected").length;
var pickedD = $(".player--defenseman.is-selected").length;
var pickedG = $(".player--goalie.is-selected").length;
console.log(pickedF, pickedD, pickedG);
// Are these zero-indexed?
if (pickedF === 2) {
$(".player--forward").not(":has(.is-selected)").css("pointer-events", "none");
console.log("Locked forwards");
} else {
$(".player--forward").css("pointer-events", "auto");
}
if (pickedD === 3) {
$(".player--defenseman").not(":has(.is-selected)").css("pointer-events", "none");
console.log("Locked defensemen");
} else {
$(".player--defenseman").css("pointer-events", "auto");
}
if (pickedG === 1) {
$(".player--goalie").not(":has(.is-selected)").css("pointer-events", "none");
console.log("Locked goalie");
} else {
$(".player--goalie").css("pointer-events", "auto");
}
// Grab the name of the player last clicked
playerName = player.find(".player__name").text();
console.log(playerName);
$(".btn--add").unbind("click");
$(".btn--add").click(function(){
console.log(pickedF, pickedD, pickedG);
// Changes the opacity of a picked player to 0.5
player.addClass("is-selected");
if (player.hasClass("player--forward")) {
$(".player__pick--forward.is-empty").eq(0).html(playerName);
$(".player__pick--forward.is-empty").eq(0).removeClass("is-empty");
}
if (player.hasClass("player--defenseman")) {
$(".player__pick--defenseman.is-empty").eq(0).html(playerName);
$(".player__pick--defenseman.is-empty").eq(0).removeClass("is-empty");
}
if (player.hasClass("player--goalie")) {
$(".player__pick--goalie.is-empty").eq(0).html(playerName);
$(".player__pick--goalie.is-empty").eq(0).removeClass("is-empty");
}
});
$(".btn--remove").click(function(){
player.removeClass("is-selected");
if (player.hasClass("player--forward")) {
$(".player__pick--forward").eq(0).html("Pick a Forward");
$(".player__pick--forward").eq(0).addClass("is-empty");
}
if (player.hasClass("player--defenseman")) {
$(".player__pick--defenseman").eq(0).html("Pick a Defenseman");
$(".player__pick--defenseman").eq(0).addClass("is-empty");
}
if (player.hasClass("player--goalie")) {
$(".player__pick--goalie").eq(0).html("Pick a Goalie");
$(".player__pick--goalie").eq(0).addClass("is-empty");
}
});
});
}
index.html
<div class="popup__text">
<p class="popup__position">tk-position</p>
<p class="popup__name">tk-name</p>
<p class="popup__years">tk-years</p>
<p class="popup__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ad dicta sunt unde, sed quae nihil inventore voluptates nulla voluptate laudantium nesciunt quo, aspernatur deleniti quod harum, nisi error doloribus.</p>
<div class="popup__stats">
<p>tk-stats</p>
</div>
<div class="buttons">
<button class="btn--add">Add to team</button>
<button class="btn--remove">Remove from team</button>
</div>
</div>
<div class="player player--bobplager player--defenseman" data-id="11">
<div class="player__info animated">
<p class="player__name">Bob Plager</p>
<p class="player__position">Defenseman</p>
</div>
</div>
<div class="player player--shanahan player--forward" data-id="12">
<div class="player__info animated">
<p class="player__name">Brendan Shanahan</p>
<p class="player__position">Forward</p>
</div>
</div>
<div class="player player--hull player--forward" data-id="13">
<div class="player__info animated">
<p class="player__name">Brett Hull</p>
<p class="player__position ">Forward</p>
</div>
</div>
<div class="player player--elliott player--goalie" data-id="14">
<div class="player__info animated">
<p class="player__name">Brian Elliott</p>
<p class="player__position ">Goalie</p>
</div>
</div>
Aucun commentaire:
Enregistrer un commentaire