我可以点击btn--add选择一个播放器，但是当我点击btn--reset重置我的选择然后再尝试添加播放器时，跨度列表中的文字不会改变以反映点击姓氏的球员。
function countPlayers(){
var playerName = null;
var player = null;
var pickedF = null;
var pickedD = null;
var pickedG = null;
$(".player").click(function(){
// Select the current player
player = $(this);
// Count number of players of each position that have been clicked
pickedF = $(".player--forward.is-selected").length;
pickedD = $(".player--defenseman.is-selected").length;
pickedG = $(".player--goalie.is-selected").length;
// Grab the name of the player last clicked
playerName = player.find(".player__name").text();
// Use regex to replace spaces with hypens and then lowercase the text
// window.location.hash will append #playerName onto the URL
var playerNameHypenate = playerName.replace(/\s+/g, '-').toLowerCase();
window.location.hash = playerNameHypenate;
});
$(".btn--add").click(function(){
// Ensures names don't match
var playerExists = $('.player__pick:contains("'+playerName+'")').length;
// Changes the opacity of a picked player to 0.5
player.addClass("is-selected");
if (player.hasClass("player--forward")) {
if (!playerExists) {
$(".player__pick--forward.is-empty").eq(0).html(playerName);
$(".player__pick--forward.is-empty").eq(0).removeClass("is-empty");
if (pickedF < 2) {
pickedF++;
}
console.log(pickedF);
if (pickedF === 2) {
$(".player--forward").not(".is-selected").css("pointer-events", "none");
console.log("Locked forwards");
} else {
$(".player--forward").css("pointer-events", "auto");
}
}
}
if (player.hasClass("player--defenseman")) {
if (!playerExists) {
$(".player__pick--defenseman.is-empty").eq(0).html(playerName);
$(".player__pick--defenseman.is-empty").eq(0).removeClass("is-empty");
if (pickedD < 3) {
pickedD++;
}
console.log(pickedD);
if (pickedD === 3) {
$(".player--defenseman").not(".is-selected").css("pointer-events", "none");
console.log("Locked defensemen");
} else {
$(".player--defenseman").css("pointer-events", "auto");
}
}
}
if (player.hasClass("player--goalie")) {
if (!playerExists) {
$(".player__pick--goalie.is-empty").eq(0).html(playerName);
$(".player__pick--goalie.is-empty").eq(0).removeClass("is-empty");
if (pickedG < 1){
pickedG++;
}
console.log(pickedG);
if (pickedG === 1) {
$(".player--goalie").not(".is-selected").css("pointer-events", "none");
console.log("Locked goalie");
} else {
$(".player--goalie").css("pointer-events", "auto");
}
}
}
});
$(".btn--remove").click(function(){
player.removeClass("is-selected");
// This refers to each element with a class of `player__pick--forward`
// Then we are seeing if this element in the `player__pick--forward` array matches
if (player.hasClass("player--forward")) {
$(".player__pick--forward").each(function(index) {
if ( $(this).text() === playerName ) {
pickedF--;
$(this).html("Pick a Forward");
$(this).addClass("is-empty");
console.log(pickedF);
}
})
}
if (player.hasClass("player--defenseman")) {
$(".player__pick--defenseman").each(function(index) {
if ( $(this).text() === playerName ) {
pickedD--;
$(this).html("Pick a Defenseman");
$(this).addClass("is-empty");
console.log(pickedD);
}
})
}
if (player.hasClass("player--goalie")) {
$(".player__pick--goalie").each(function(index) {
if ( $(this).text() === playerName ) {
pickedG--;
$(this).html("Pick a Goalie");
$(this).addClass("is-empty");
console.log(pickedG);
}
})
}
});
}
// // Clear all picks
function clearPicks() {
$(".btn--reset").click(function(){
// Deselect players
$(".player").removeClass("is-selected");
// Change pointer events back to auto
$(".player").css("pointer-events", "auto");
// Revert text back to defaults
$(".player__pick--forward").html("Pick a Forward");
$(".player__pick--defenseman").html("Pick a Defenseman");
$(".player__pick--goalie").html("Pick a Goalie");
pickedF = 0;
pickedD = 0;
pickedG = 0;
console.log(pickedF, pickedD, pickedG);
});
}
<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>
<ul class="">
<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>
<button class="btn--reset">Clear all picks</button>
答案 0 :(得分：0)
所有单击事件绑定函数都嵌套在函数countPlayers和clearPicks中。永远不会调用这些函数，因此点击事件永远不会附加到DOM。