mardi 20 septembre 2016

Eq causing issues on click when removing player from list

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