Question

我有一个基本的刽子手程序。点击该字母，然后通过将字母着色为红色或绿色来告诉您是对还是错。如果是绿色，则用字母替换隐藏字中的破折号。我的代码部分工作。不起作用的部分是我有一个div的输出部分，它应该告诉你是否猜测是否正确，并且在6次失败的猜测中，你输了并重置。它目前没有做任何这样的事情。它根本没有在div中显示任何东西。

TY提前。如果你对我没有解释得很好的问题有疑问，可以在大约1小时内回复他们。谢谢！

Jsfiddle - http://jsfiddle.net/25b3fr4u/

HTML -

<body>


<form id="form" name="form" method="post" action="">
<input type="button" id="but" value="Start"/>
<div id="hangman-jquery">
    <div id="word"></div>
    <div id="alpha"></div>
</div>
</form>

<div id="win">
</div>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="hangman.js"></script>
</body>

JS -

function hangman(word) {
    var trys = 0;
    var guess = 0;
    var alpha = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    $.each(alpha.split(''), function(i, val) {
        $('#alpha').append($('<span class="guess">' + val + '</span>'));
    });
    $.each(word.split(''), function(i, val) {
        $('#word').append($('<span class="letter" letter="' + val + '">-</span>'));
    });
    $('.guess').click(function() {
        var count = $('#word [letter=' + $(this).text() + ']').each(function() {
            $(this).text($(this).attr('letter'));
        }).length;
        $(this).removeClass('guess').css('color', (count > 0 ? 'green' : 'red')).unbind('click');

        if (guess > 0) {
        $('#win').text("Correct Guess");
        } else if (guess < 0) {
        $(this).html(++trys);
        $('#win').text("You have tried to guess the word and failed " + trys + " times");
        }
        if (trys == 6) {
        alert("You have guessed six times, you lose");
        trys = 0;
        $("#win").text("");
        }
    });
}

$(document).ready(function() {
    $('#but').click(function() {
        var options = new Array("DOG", "CAT", "BAT", "HORSE", "TIGER", "LION", "BEAR", "LIGER", "DOOM", "SPIDER", "TREES", "LAPTOP");
        var random = 1 + Math.floor(Math.random() * 12);
        hangman(options[random]);
    });
});

Answer 1

代码已修复：http://jsfiddle.net/25b3fr4u/1/。在没有正确增加的情况下，您必须检查计数而不是在您的情况下猜测。 guess设置为0并且从不使用。

var count = $('#word [letter=' + $(this).text() + ']').each(function() {
        $(this).text($(this).attr('letter'));
    }).length;
    $(this).removeClass('guess').css('color', (count > 0 ? 'green' : 'red')).unbind('click');

    if (count > 0) {
    $('#win').text("Correct Guess");
    } else if (!count > 0) {
    trys++;
    $('#win').text("You have tried to guess the word and failed " + trys + " times");
    }
    if (trys == 6) {
    alert("You have guessed six times, you lose");
    trys = 0;
    $("#win").text("");
    }

我相信你可以处理其余的事情。玩得开心。

无法弄清楚为什么我的div输出不起作用

1 个答案: