在第一个跨度上更改文本，单击“is-empty”类

Question

我在

的地方

• 点击这个50名冰球运动员网格上的.player抓住该球员的名字
• 然后打开一个弹出框，用户可以在其中添加该播放器 通过单击按钮btn-add来确定团队。我然后在列表中切换第一个空跨度的文本，该列表显示一个人选择的玩家的名字，使用.eq()和.html()根据他们的位置 - player--forward ， player--defenseman 或 player--goalie

问题

当我点击btn-add按钮时，它会更改所有三个位置的第一个空插槽的文本。 spans： player--forward ， player--defenseman 或 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")是否有课程时，这不是特定于用户点击的当前播放器，它是＆＃39;要检查类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");
        }
    });
});