单击时使用“is-empty”类更改第一个跨度上的文本

Question

我在哪里

• 点击这个由 50 名曲棍球运动员组成的网格上的 .player 即可获取该运动员的姓名
• 然后它会打开一个弹出框，用户可以在其中将该播放器添加到他们的 通过单击按钮btn-add 进行团队合作。然后，我将切换列表中第一个空范围的文本，该列表显示一个人选择的球员的名字，使用 .eq() 和 .html() 根据他们的位置 - player--forward、player--defenseman 或 player--goalie

问题

当我点击btn-add 按钮时，它会更改所有三个位置的第一个空槽的文本spans：player--forward、player--defenseman strong> 或 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");
        }
    });
});