Problem
- If two or more hockey players of a position have been selected, clicking
btn--remove will remove the first player of that position, instead of the last player that was "Added to the Team."
- If only one player is picked from each of the three positions, clicking on
btn--remove will set all the text back to its default. "Pick a position-name"
scripts.js (Scroll down to see the btn--remove part of the function)
$(".player").click(function(){
// Select the current player
var player = $(this);
// 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;
// Grab the name of the player last clicked
playerName = player.find(".player__name").text();
// Literally magic.
$(".btn--add").unbind("click");
$(".btn--add").click(function(){
// Ensures names don't match
var playerExists = $('.player__pick:contains("'+playerName+'")').length;
// Changes the opacity of a picked player to 0.5
player.addClass("is-selected");
if (player.hasClass("player--forward")) {
if (!playerExists) {
$(".player__pick--forward.is-empty").eq(0).html(playerName);
$(".player__pick--forward.is-empty").eq(0).removeClass("is-empty");
if (pickedF < 2) {
pickedF++;
}
console.log(pickedF);
if (pickedF === 2) {
$(".player--forward").not(".is-selected").css("pointer-events", "none");
console.log("Locked forwards");
} else {
$(".player--forward").css("pointer-events", "auto");
}
}
}
if (player.hasClass("player--defenseman")) {
if (!playerExists) {
$(".player__pick--defenseman.is-empty").eq(0).html(playerName);
$(".player__pick--defenseman.is-empty").eq(0).removeClass("is-empty");
if (pickedD < 3) {
pickedD++;
}
if (pickedD === 3) {
$(".player--defenseman").not(".is-selected").css("pointer-events", "none");
console.log("Locked defensemen");
} else {
$(".player--defenseman").css("pointer-events", "auto");
}
}
}
if (player.hasClass("player--goalie")) {
if (!playerExists) {
$(".player__pick--goalie.is-empty").eq(0).html(playerName);
$(".player__pick--goalie.is-empty").eq(0).removeClass("is-empty");
if (pickedG < 1){
pickedG++;
}
if (pickedG === 1) {
$(".player--goalie").not(":has(.is-selected)").css("pointer-events", "none");
console.log("Locked goalie");
} else {
$(".player--goalie").css("pointer-events", "auto");
}
}
}
});
$(".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 (pickedF > 0 && pickedF < 2) {
pickedF--;
$(".player--goalie").css("pointer-events", "auto");
console.log(pickedF);
}
}
if (player.hasClass("player--defenseman")) {
$(".player__pick--defenseman").eq(0).html("Pick a Defenseman");
$(".player__pick--defenseman").eq(0).addClass("is-empty");
if (pickedD > 0 && pickedD < 3){
pickedD--;
$(".player--goalie").css("pointer-events", "auto");
console.log(pickedD);
}
}
if (player.hasClass("player--goalie")) {
$(".player__pick--goalie").eq(0).html("Pick a Goalie");
$(".player__pick--goalie").eq(0).addClass("is-empty");
if (pickedG > 0){
pickedG--;
$(".player--goalie").css("pointer-events", "auto");
console.log(pickedG);
}
}
});
});
index.html
// List
<ul>
<li><span class="player__pick player__pick--forward is-empty"><i class="fa fa-long-arrow-right" aria-hidden="true"></i> Pick a forward</span></li>
<li><span class="player__pick player__pick--forward is-empty"><i class="fa fa-long-arrow-right" aria-hidden="true"></i> Pick a forward</span></li>
<li><span class="player__pick player__pick--defenseman is-empty"><i class="fa fa-long-arrow-right" aria-hidden="true"></i> Pick a defenseman</span></li>
<li><span class="player__pick player__pick--defenseman is-empty"><i class="fa fa-long-arrow-right" aria-hidden="true"></i> Pick a defenseman</span></li>
<li><span class="player__pick player__pick--defenseman is-empty"><i class="fa fa-long-arrow-right" aria-hidden="true"></i> Pick a defenseman</span></li>
<li><span class="player__pick player__pick--goalie is-empty"><i class="fa fa-long-arrow-right" aria-hidden="true"></i> Pick a goalie</span></li>
</ul>
// Popup with Add & Remove Player from Team button
<div class="popup clearfix">
<div class="icon-container">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
<img src="" alt="" class="popup__picture animated">
<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>
// Players
<div class="player player--pronger player--defenseman" data-id="16">
<div class="player__info animated">
<p class="player__name">Chris Pronger</p>
<p class="player__position">Defenseman</p>
</div>
</div>
<div class="player player--lefley player--forward" data-id="17">
<div class="player__info animated">
<p class="player__name">Chuck Lefley</p>
<p class="player__position">Forward</p>
</div>
</div>
<div class="player player--janney player--forward" data-id="18">
<div class="player__info animated">
<p class="player__name">Craig Janney</p>
<p class="player__position">Forward</p>
</div>
</div>
<div class="player player--joseph player--goalie" data-id="19">
<div class="player__info animated">
<p class="player__name">Curtis Joseph</p>
<p class="player__position">Goalie</p>
</div>
</div>
Aucun commentaire:
Enregistrer un commentaire