替换 <li> ul 中标签中的文本

Question

我是网络编程的新手，我正在尝试完成一个简单的猜谜游戏项目。

现在我被困住了，因为我正在尝试用玩家过去的猜测更新无序列表，但页面没有更新。

这是我的jQuery代码：

$(document).ready(function() { 
    game = new Game;
    var guessNum
    onSubmit = function(event){
        event.preventDefault();
        var input = $('#player-input');
        var guess = +input.val();
        input.val('');
        var result = game.playersGuessSubmission(guess);
        if (result == 'You have already guessed that number.') {
            $('#title').text(result);
        } else if (result === 'You Win!' || result === 'You lose.') {
            $('#title').text(result);
            $('#subtitle').text('Press the reset button to play again.')
            $('#hint').prop('disabled', true)
            $('#submit').prop('disabled', true)
        } else { //this is the relevant portion
            guessNum = (game.pastGuesses.length - 1).toString();
            $('#' + guessNum).text(guessNum);
        } 
    };
    $('#submit').on('click', function(e){
        onSubmit(e);
    });
    $('#player-input').on('keypress', function(e) {
        if(e.which == 13) {
            e.preventDefault();
            onSubmit(e);
        };
    });
});

以下是无序列表的 html：

 <div id='guesses'>
        <!-- unordered list of guesses -->
        <ul id='past-guesses' class="list-inline center">
          <li id='0' class="guess list-group-item ">-</li>
          <li id='1'class="guess list-group-item">-</li>
          <li id='2' class="guess list-group-item">-</li>
          <li id='3' class="guess list-group-item">-</li>
          <li id='4' class="guess list-group-item">-</li>
        </ul>
      </div>

我也尝试不使用 html 中的标识符，而是以这种方式选择 li 元素：

 var idStr = "#past-guesses:eq(" + guessNum + ")"
 $(idStr).text(game.playersGuess.toString());

在任一情况下，页面都不会使用显示的无序列表中的新值进行更新。我做错了什么？

编辑

为了响应评论中的请求，这是我的整个 JS 文件(现在略有编辑，因为我正在尝试将列表 id 更改为不以数字开头(：

function generateWinningNumber() {
    num = Math.random()
    if (num === 0) {
        return 1;
    } else {
      roundNum = Math.floor(num*100);
      return roundNum + 1;
    }
}
function shuffle(array) {
  var m = array.length, t, i;
  // While there remain elements to shuffle…
  while (m) {
    // Pick a remaining element…
    i = Math.floor(Math.random() * m--);
    // And swap it with the current element.
    t = array[m];
    array[m] = array[i];
    array[i] = t;
  }
  return array;
}
function Game(){
    this.winningNumber = generateWinningNumber();
    this.playersGuess = null;
    this.pastGuesses = [];
}
Game.prototype.difference = function() {
    return Math.abs(this.playersGuess - this.winningNumber);
}
Game.prototype.isLower = function() {
    if (this.playersGuess < this.winningNumber) {
        return true;
    } else {
        return false;
    }
}
Game.prototype.checkGuess = function() {
    if (this.playersGuess === this.winningNumber) {
        return "You Win!";
    }
    if (this.pastGuesses.indexOf(this.playersGuess) > -1) {
        return "You have already guessed that number.";
    }
    this.pastGuesses.push(this.playersGuess);
    if (this.pastGuesses.length >= 5) {
        return "You Lose.";
    } else if (this.difference() < 10) {
        return "You're burning up!";
    } else if (this.difference() < 25) {
        return "You're lukewarm.";
    } else if (this.difference() < 50) {
        return "You're a bit chilly.";
    } else {
        return "You're ice cold!";
    }
}
Game.prototype.playersGuessSubmission = function(num) {
    if (num < 1 || num > 100 || typeof num != 'number') {
        throw "That is an invalid guess."
    } else {
        this.playersGuess = num;
        return this.checkGuess();
    }
}
Game.prototype.provideHint = function() {
    return shuffle([generateWinningNumber(), generateWinningNumber(), this.winningNumber]);
}
newGame = function() {
    game = new Game;
    return game;
}


$(document).ready(function() { 
    var game = new Game;
    var guessNum
    onSubmit = function(event){
        event.preventDefault();
        var input = $('#player-input');
        var guess = +input.val();
        input.val('');
        var result = game.playersGuessSubmission(guess);
        if (result == 'You have already guessed that number.') {
            $('#title').text(result);
        } else if (result === 'You Win!' || result === 'You lose.') {
            $('#title').text(result);
            $('#subtitle').text('Press the reset button to play again.')
            $('#hint').prop('disabled', true)
            $('#submit').prop('disabled', true)
        } else {
            guessNum = (game.pastGuesses.length - 1).toString();
            $('#l' + guessNum).text(guessNum);
        } 
    };
    $('#submit').on('click', function(e){
        onSubmit(e);
    });
    $('#player-input').on('keypress', function(e) {
        if(e.which == 13) {
            e.preventDefault();
            onSubmit(e);
        };
    });
});
});

Answer 1

你需要转义 CSS 选择器。

尝试替换此行：

$('#' + guessNum).text(guessNum);

有了这个：

var selector = "#\" + guessNum.toString().charCodeAt(0).toString(16) + " " + guessNum.toString().substr(1);
$(selector).text(guessNum);

您可以在以下位置阅读更多信息：https://www.w3.org/International/questions/qa-escapes