比较两个字符串的文本,问题与

时间:2016-09-19 22:19:00

标签: javascript jquery if-statement comparison string-comparison

问题

对于作为防守队员.player--defenseman的曲棍球运动员,多次点击"Add to Team"按钮btn-add会在每次点击后替换一个跨栏的文字,但不应添加该玩家的名字不止一次。

我在哪里

  • 我尝试使用以下if语句spanText !== playerName来比较两个字符串,但是当我console.log字符串时,我得到的是默认文本"Pick a defenseman",然后是该播放器的名字,尽管该球员被选中并且他的名字已经在跨越
  • 我觉得问题可能是变量spanTexteq(0),尤其是涉及防御员的部分

scripts.js中

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

            $(".btn--remove").click(function(){
                player.removeClass("is-selected");

                if (player.hasClass("player--forward")) {
                    $(".player__pick--forward").eq(0).html("Pick a Forward");
                    $(".player__pick--forward").eq(0).addClass("is-empty");

                    if (pickedF > 0 && pickedF < 2) {
                        pickedF--;
                    }
                }

                if (player.hasClass("player--defenseman")) {
                    $(".player__pick--defenseman").eq(0).html("Pick a Defenseman");
                    $(".player__pick--defenseman").eq(0).addClass("is-empty");

                    if (pickedD > 0 && pickedD < 3){
                        pickedD--;
                    }
                }

                if (player.hasClass("player--goalie")) {
                    $(".player__pick--goalie").eq(0).html("Pick a Goalie");
                    $(".player__pick--goalie").eq(0).addClass("is-empty");

                    if (pickedG > 0){
                        pickedG--;
                    }
                }

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

的index.html

曲棍球运动员

<div class="player player--plante player--goalie" data-id="30">
    <div class="player__info animated">
        <p class="player__name">Jacques Plante</p>
        <p class="player__position">Goalie</p>
    </div>
</div>

<div class="player player--brown player--defenseman" data-id="31">
    <div class="player__info animated">
        <p class="player__name">Jeff Brown</p>
        <p class="player__position">Defenseman</p>
    </div>
</div>

<div class="player player--roberts player--defenseman" data-id="32">
    <div class="player__info animated">
        <p class="player__name">Jimmy Roberts</p>
        <p class="player__position">Defenseman</p>
    </div>
</div>

<div class="player player--mullen player--forward" data-id="33">
    <div class="player__info animated">
        <p class="player__name">Joe Mullen</p>
        <p class="player__position">Forward</p>
    </div>
</div>

的index.html

带有跨度的列表

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

的index.html

弹出btn--add

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

1 个答案:

答案 0 :(得分:-1)

尝试使用!=来比较字符串内容。