目的

Question

目的

我正在尝试比较两个字符串的文本 - 第一个是包含跨度的列表中的文本。它的默认文本为“选择一名防守员”，然后是刚刚点击的播放器名称。
目的是使曲棍球运动员的名字仅被点击替换默认文本，一次添加到此列表，而不是多次。

问题

当我console.log()时，我仍然会看到默认文字，尽管玩家的名字被添加到了范围内。因此，当我使用包含spanText !== playerName的if语句时，我仍然可以多次添加同一个播放器，但我不确定为什么这只发生在.player--defenseman而不是另一个位置

scripts.js中

$(".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 spanText = $(".player__pick").eq(0).text();

        // Changes the opacity of a picked player to 0.5
        player.addClass("is-selected");

        if (player.hasClass("player--forward")) {
            if (spanText !== playerName) {
                $(".player__pick--forward.is-empty").eq(0).html(playerName);
                $(".player__pick--forward.is-empty").eq(0).removeClass("is-empty");

                if (pickedF < 2) {
                    pickedF++;
                }

                if (pickedF === 2) {
                    $(".player--forward").not(":has(.is-selected)").css("pointer-events", "none");
                    console.log("Locked forwards");
                } else {
                    $(".player--forward").css("pointer-events", "auto");
                }
            }
        }

        // Something is wonky here
        if (player.hasClass("player--defenseman")) {
            if (spanText !== playerName) {
                $(".player__pick--defenseman.is-empty").eq(0).html(playerName);
                $(".player__pick--defenseman.is-empty").eq(0).removeClass("is-empty");

                console.log(spanText);
                console.log(playerName);

                if (pickedD < 3) {
                    pickedD++;
                }

                if (pickedD === 3) {
                    $(".player--defenseman").not(":has(.is-selected)").css("pointer-events", "none");
                    console.log("Locked defensemen");
                } else {
                    $(".player--defenseman").css("pointer-events", "auto");
                }
            }
        }

        if (player.hasClass("player--goalie")) {
            if (spanText !== playerName) {
                $(".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");
                }
            }
        }

        console.log(pickedF, pickedD, 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 to 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>

Answer 1

问题出在这一行：

var spanText = $(".player__pick").eq(0).text();

它选择player__pick类的第一个元素这就是为什么：

if (spanText !== playerName) {

将始终将playerName与第一个元素与player__pick类进行比较。它不会检查目标元素是否是＆＃34;防御者＆＃34; ，＆＃34;转发＆＃34; 或＆＃34;守门员＆＃34;

解？

有几种解决方法。其中一个是检查.player__pick元素contains玩家名称的任何：

var player_exists = $('.player__pick:contains("'+playerName+'")').length;

然后：

if (!player_exists) {
    // do the stuff...
}

JSFiddle

单击时不匹配的两个字符串的文本

目的

问题

scripts.js中

的index.html

1 个答案: