mercredi 14 septembre 2016

Issue counting number of divs with class `is-selected`

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