单击时更改输入字段的文本

Question

目标

• 在我的 if-else 语句中，当 .player 具有类时 picked.is-inactive输入字段的文本应该是空白的，但现在是最后点击玩家的名字。
• 现在，当玩家被选中时，所有 20 个输入字段都有自己的 文本更改为最后点击的玩家。 但是，名称 第一个带有picked.is-active 的玩家应该放在第一个 输入字段#p1 以此类推，直到所有 20 个玩家都被选中并且 20 个输入字段被填满。

scripts.js

// Every time a player is clicked, note the name of the player
$(".player").on("click", function(){

    // Get the name of that player, only if picked.is-active
    // Put the text of that player into the appropriate input field

    if ($(this).find("picked.is-active")) {
        var playerName = $(this).find(".player__name").html();
        $("input").val(playerName);
        console.log(playerName);
    } else {
        $("input").val("")
    }
});

index.html（表单）

    <form id="form">
        <input type="text" name="p1"  id="p1" required>
        <input type="text" name="p2"  id="p2" required>
        <input type="text" name="p3"  id="p3" required>
        <input type="text" name="p4"  id="p4" required>
        <input type="text" name="p5"  id="p5" required>
        <input type="text" name="p6"  id="p6" required>
        <input type="text" name="p7"  id="p7" required>
        <input type="text" name="p8"  id="p8" required>
        <input type="text" name="p9"  id="p9" required>
        <input type="text" name="p10" id="p10" required>
        <input type="text" name="p11" id="p11" required>
        <input type="text" name="p12" id="p12" required>
        <input type="text" name="p13" id="p13" required>
        <input type="text" name="p14" id="p14" required>
        <input type="text" name="p15" id="p15" required>
        <input type="text" name="p16" id="p16" required>
        <input type="text" name="p17" id="p17" required>
        <input type="text" name="p18" id="p18" required>
        <input type="text" name="p19" id="p19" required>
        <input type="text" name="p20" id="p20" required>
        <button type="submit">
            Submit your vote
        </button>

index.html（播放器）

<div class="player player--goalie year--1970">
                    <div class="tooltip tooltip--tall">
                        <p class="tooltip__name">Glen Hanlon</p>
                        <p class="tooltip__hometown"><span>Hometown:</span> Brandon, Man.</p>
                        <p class="tooltip__years"><span>Years Played:</span> 1974-1977</p>
                        <div class="tooltip__stats--inline">
                            <div class="stats__group stats--games">
                                <p class="stats__header">GP</p>
                                <p class="stats__number--games">172</p>
                            </div>

                            <div class="stats__group stats--goalsag">
                                <p class="stats__header">GA</p>
                                <p class="stats__number">4.22</p>
                                <p class="stats__number">3.99</p>
                                <p class="stats__number stats__number--goalsag">3.09</p>
                            </div>

                            <div class="stats__group stats--savep">
                                <p class="stats__header">SAV%</p>
                                <p class="stats__number">.892</p>
                                <p class="stats__number">.891</p>
                                <p class="stats__number stats__number--savep">.906</p>
                            </div>

                            <div class="stats__group stats--shutouts">
                                <p class="stats__header">SO</p>
                                <p class="stats__number">0</p>
                                <p class="stats__number stats__number--shutouts">4</p>
                                <p class="stats__number">4</p>
                            </div>
                        </div> <!-- tooltip__stats--inline -->
                    </div> <!-- tooltip -->
                    <div class="player__headshot player--hanlon">
                        <div class="picked is-inactive"><i class="fa fa-star" aria-hidden="true"></i></div>
                    </div>
                    <p class="player__name" value="Glen Hanlon">Glen Hanlon</p>
                    <p class="player__position">Goalie</p>
                </div>

Answer 1

你需要告诉具体的文本框应该更新什么。

// Every time a player is clicked, note the name of the player
$(".player").on("click", function(){
    var playerNames = [];
    $("input:text").each(function(i, t) { playerNames.push(t.value) });

    if ($(this).find("picked.is-active")) {
        var playerName = $(this).find(".player__name").html();
        var index = playerNames.indexOf(playerName);

        if(index == -1) // add player
            $("input:text:eq(" + playerNames.indexOf("") + ")").val(playerName);
        else // remove player
            $("input:text:eq(" + index + ")").val("");           
    } else {
        $("input").val("");
    }
});

说明

在每次点击时，使用 $.each 循环将所有文本框值放入数组 playerNames

然后检查playerName是否已经存在于playerNames数组中。

如果不存在（即index == -1），则将其添加到下一个空文本框

playerNames.indexOf("") 带来下一个空文本框的索引

否则从它所在的文本框中删除它。

希望这会有所帮助！