按下``button-reset``后文本不变

Question

问题

我可以通过单击btn--add来选择球员，但是当我单击btn--reset重置我的选择，然后再次尝试添加球员时，跨度列表中的文本不会更改以反映所单击的最后一个球员的姓名。

更新#1:是的，我在scripts.js的底部调用了这两个函数(只是在代码片段中没有显示)

scripts.js

    function countPlayers(){

        var playerName = null;
        var player = null;
        var pickedF = null;
        var pickedD = null;
        var pickedG = null;

        $(".player").click(function(){

                 // Select the current player
                 player = $(this);

                 // Count number of players of each position that have been clicked
                 pickedF = $(".player--forward.is-selected").length;
                 pickedD = $(".player--defenseman.is-selected").length;
                 pickedG = $(".player--goalie.is-selected").length;

                 // Grab the name of the player last clicked
                 playerName = player.find(".player__name").text();

                 // Use regex to replace spaces with hypens and then lowercase the text
                 // window.location.hash will append #playerName onto the URL
                 var playerNameHypenate = playerName.replace(/\s+/g, '-').toLowerCase();
                 window.location.hash = playerNameHypenate;
             });

        $(".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++;
                         }

                         console.log(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++;
                         }

                         console.log(pickedG);

                         if (pickedG === 1) {
                             $(".player--goalie").not(".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");


            // This refers to each element with a class of `player__pick--forward`
            // Then we are seeing if this element in the `player__pick--forward` array matches
            if (player.hasClass("player--forward")) {
                $(".player__pick--forward").each(function(index) {

                      if ( $(this).text() === playerName ) {
                        pickedF--;
                        $(this).html("Pick a Forward");
                        $(this).addClass("is-empty");

                        console.log(pickedF);
                    }
                })
            }

            if (player.hasClass("player--defenseman")) {
                $(".player__pick--defenseman").each(function(index) {

                      if ( $(this).text() === playerName ) {
                        pickedD--;
                        $(this).html("Pick a Defenseman");
                        $(this).addClass("is-empty");

                        console.log(pickedD);
                    }
                })
            }

            if (player.hasClass("player--goalie")) {
                $(".player__pick--goalie").each(function(index) {

                      if ( $(this).text() === playerName ) {
                        pickedG--;
                        $(this).html("Pick a Goalie");
                        $(this).addClass("is-empty");
                        console.log(pickedG);
                    }
                })
            }
            });
}

    // // Clear all picks
    function clearPicks() {
        $(".btn--reset").click(function(){

            // Deselect players
            $(".player").removeClass("is-selected");

            // Change pointer events back to auto
            $(".player").css("pointer-events", "auto");

            // Revert text back to defaults
            $(".player__pick--forward").html("Pick a Forward");
            $(".player__pick--defenseman").html("Pick a Defenseman");
            $(".player__pick--goalie").html("Pick a Goalie");

            pickedF = 0;
            pickedD = 0;
            pickedG = 0;

            console.log(pickedF, pickedD, pickedG);
        });
    }

index.html

<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>

<ul class="">
                        <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>

                    <button class="btn--reset">Clear all picks</button>

Answer 1

所有单击事件绑定函数都嵌套在函数countPlayers和clearPicks中。这些函数永远不会被调用，因此单击事件永远不会附加到DOM。