用单击“`is empty`”类更改第一个span上的文本

Question

我在哪里

• 在这个由50名曲棍球运动员组成的网格上，点击一个.player就可以得到那个球员的名字。
• 然后打开一个弹出框，用户可以通过单击btn-add按钮将该玩家添加到他们的团队中。然后，我将在列表中切换第一个空span的文本，该列表显示一个人选择的球员的姓名，根据他们的位置使用player--forward，player--defenseman和.html() -- .eq()或.html()

问题

当我单击“player--forward，player--defenseman”按钮时，它会更改所有三个位置的spans：spans或player--goalie的第一个空槽的文本，该位置上一次单击播放机的名称，而不是只单击该位置。

scripts.js

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

        // 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);

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

        $(".btn--add").click(function(){
            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");
            }
        });
    });
}

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

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


        <div class="info__group info--team">
            <img src="img/team-2.png" class="team">
            <p class="info__header">Make Your Own Team</p>
            <p>Select and share your dream team online by clicking on a player to see their stats, learn more about their impact on the Blues and why they were chosen for our Top 50 list.</p>
            <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>
        </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>

    <div class="player player--sutter player--forward" data-id="15">
        <div class="player__info animated">
            <p class="player__name">Brian Sutter</p>
            <p class="player__position">Forward</p>
        </div>
    </div>

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

Answer 1

在您的$(".btn--add").click(function(){中，您的if行将检查$(".player")是否有一个类，这并不是特定于用户单击的当前播放器，而是将检查player类是否有这三个类中的一个(看起来是这样)，因此所有三个if语句都将运行。

如果在单击当前播放器时将其存储在变量中，则可以在稍后的按钮单击函数中将该播放器作为目标。下面是一个例子：

$(".player").click(function(){
    var player = $(this); // select current player div
    // 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);

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

    $(".btn--add").click(function(){
        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");
        }
    });
});