繁体   English   中英

替换文字 <li> 在ul中标记

[英]Replace text in an <li> tag in an ul

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

现在,我被卡住了,因为我试图使用玩家过去的猜测来更新无序列表,但是页面不会更新。

这是我的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);
        };
    });
});
});

您需要转义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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM