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