[英]Changing text of input field on click
.player
has the class picked.is-inactive
the text of the input field should be blank, but right now it's the name of last clicked player . .player
的类为picked.is-inactive
时,输入字段的文本应为空白,但现在它是最后单击的player的名称 。 picked.is-active
should be put into the first input field #p1
and so on until all 20 players have been selected and the 20 input fields are filled. picked.is-active
玩家的姓名输入第一个输入字段#p1
,依此类推,直到选择了全部20个玩家并填写了20个输入字段。 // 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("")
}
});
<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>
<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>
you need to tell what specific textbox should update. 您需要确定应更新哪个特定的文本框。
// 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("");
}
});
Explanation 说明
on each click, getting all text box values into an arry playerNames
using $.each
loop 每次点击,使用
$.each
循环将所有文本框值放入$.each
playerNames
then check the active (or clicked) playerName
already exists in the playerNames
array or not. 然后检查
playerNames
数组中是否存在活动的(或单击的) playerName
。
if not exists (ie index == -1
) then add it to next empty textbox 如果不存在(即
index == -1
),则将其添加到下一个空文本框
playerNames.indexOf("")
brings the index of next empty textbox playerNames.indexOf("")
带来下一个空文本框的索引
else remove it from the textbox where it exists. 否则,将其从存在的文本框中删除。
Hope this helps!. 希望这可以帮助!。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.