Question

我正在使用 PHP ， MySQL ＆amp;创建 Hang a Man 的的Javascript 即可。每件事情都很完美，我从DB中随机得到一个单词，将其作为标签应用于 display = none 的类。现在，当我点击一个字符时，该字符变为禁用，我实际上想要但标签字符不显示。我的代码是：

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<?php

    include( 'config.php' );

    $question = questions();    // Get question.
    $alpha = alphabats();       // Get alphabets.

?>
<script language="javascript">
    function clickMe( name ){

        var question = '<?php echo $question; ?>';
        var questionLen = <?php echo strlen($question); ?>;

        for ( var i = 0; i < questionLen; i++ ){
            if ( question[i] == name ){

                var link = document.getElementById( name );
                link.style.display = 'none';

                var label = document.getElementById( 'questionLabel' + i );
                label.style.display = 'block';

            }
        }
    }
</script>
<div>
<table align="center" style="border:solid 1px">
    <tr>
        <?php
            for ( $i = 0; $i < 26; $i++ ) {
                echo "<td><a href='#' id=$alpha[$i] name=$alpha[$i] onclick=clickMe('$alpha[$i]');>". $alpha[$i] ."</a>&nbsp;</td>";            
            }
        ?>
    </tr>
</table>
<br/>
<table align="center" style="border:solid 1px">
    <tr>
        <?php
            for ( $i = 0; $i < strlen($question); $i++ ) {
                echo "<td class='question'><label id=questionLabel$i >". $question[$i] ."</label></td>";            
            }
        ?>
    </tr>
</table>
</div>

Answer 1

首先，当您将其显示设置为none时，为什么会显示？

其次，你可能想隐藏if之外的字母 - 如果你不这样做，如果问题出现几次，你会多次隐藏这封信（想想“banana” - 如果你选择“a”，它会隐藏“a”三次） - 这不是问题，如果问题中没有出现，也不会隐藏这封信 - 可能是这样。

第三 - 你为什么使用标签？你可以，它不是非法或任何东西，但它们有明确的目的 - 标记属于复选框的文本和其他没有自己文本的可选元素。最好根据其意图使用元素。由于在刽子手游戏中没有专门用于单个字母的HTML元素，因此最好使用span或div。

<强>更新试试这个;我不确定，但有理由相信这是你想要的：

    for ( var i = 0; i < questionLen; i++ ){
        var link = document.getElementById( name );
        link.style.display = 'none';

        if ( question[i] == name ){

            var label = document.getElementById( 'questionLabel' + i );
            label.style.display = 'inline';

        }
    }

Answer 2

您是否尝试过label.style.display = '';而不是'block'？

Answer 3

$问题似乎被误用了......

就这一行：

for ( $i = 0; $i < strlen($question); $i++ ) {
 echo "<td class='question'><label id=questionLabel$i >". $question[$i] ."</label></td>";            
}

你说strlen是一个字符串中的字符数。或称字符串长度。然后你说“.... $ question [$ i] ....”这是一个非数组...

左右....

将“strlen”替换为“count”，然后在$ questions上使用str_split。

所以你最终得到......

$question = str_split($question);
for ( $i = 0; $i < count($question); $i++ ) {
   echo "<td class='question'><label id=questionLabel$i >". $question[$i] ."</label></td>";            
}

这将分裂每个角色，这是我认为你想要做的。

Answer 4

问题（正如Amadan指出的那样）是你要为标签设置display到none（看起来你可能已经复制粘贴了）：

            var link = document.getElementById( name );
            link.style.display = 'none';

            var label = document.getElementById( 'questionLabel' + i );
            label.style.display = 'inline';

此外，您可以考虑重构使用正则表达式而不是循环遍历字符串：

function clickMe(name) {

    // Get the question string
    var question = '<?php echo $question; ?>',

    // Create a RegExp based on the name
        re = new RegExp(name, "gi"),

    // Get a handle to the link   
        link = document.getElementById(name),

    // Set up our `match` variable
        match;

    // Set the link display to "none" outside of the loop
    link.style.display = "none";

    // For each match found in the question, show that label. 
    while(match = re.exec(question))
        document.getElementById("questionLabel"+match.index)
          .style.display = "inline";
}

你的功能以这种方式压缩到只有7行代码，比循环遍历问题的每个字符更容易阅读和更聪明。

使用javascript逐字符显示标签

4 个答案: