Question

我在下面写了一段代码。我在这里要做的是，当选择三个右侧单元格时，它应该显示一条消息说“正确”，如果没有则应该说“再试一次”。到目前为止，我的代码只突出了细胞。我想知道下一步该怎么办？

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
table {
width:400px;
font-family:Verdana, Arial, Helvetica, sans-serif;
border:1px solid #000;
}
table td {border:1px solid #000;}
.bgrd {background-color:#CCCCCC;cursor:pointer;}
.bgrd_selected {background-color:#FFCC00;cursor:pointer;}

</style>
<script type="text/javascript">
function setColor(what)
{
    var thetds = document.getElementsByTagName('td');
    for(var i = 0; i < thetds.length; i++)
    {
        if(thetds[i].className == 'bgrd_selected')
        {
            thetds[i].className = 'bgrd';
        }
    }
    what.className = 'bgrd_selected';
}
</script>
</head>
<body>
<table cellspacing="0" cellpadding="0">
<tr>
<td class="bgrd" onclick="setColor(this)">
Select</td>
<td class="bgrd" onclick="setColor(this)">
Select</td>
<td class="bgrd" onclick="setColor(this)">
Select</td>

</tr>
<tr>
<td class="bgrd" onclick="setColor(this)">
Select</td>
<td class="bgrd" onclick="setColor(this)">
Select</td>
<td class="bgrd" onclick="setColor(this)">
Select</td>

</tr>


<tr>
<td class="bgrd" onclick="setColor(this)">
Select</td>
<td class="bgrd" onclick="setColor(this)">
Select</td>
<td class="bgrd" onclick="setColor(this)">
Select</td>

</tr>

<tr>
<td class="bgrd" onclick="setColor(this)">
Select</td>
<td class="bgrd" onclick="setColor(this)">
Select</td>
<td class="bgrd" onclick="setColor(this)">
Select</td>

</tr>

<tr>
<td class="bgrd" onclick="setColor(this)">
Select</td>
<td class="bgrd" onclick="setColor(this)">
Select</td>
<td class="bgrd" onclick="setColor(this)">
Select</td>

</tr>

<tr>
<td class="bgrd" onclick="setColor(this)">
Select</td>
<td class="bgrd" onclick="setColor(this)">
Select</td>
<td class="bgrd" onclick="setColor(this)">
Select</td>

</tr>

<tr>
<td class="bgrd" onclick="setColor(this)">
Select</td>
<td class="bgrd" onclick="setColor(this)">
Select</td>
<td class="bgrd" onclick="setColor(this)">
Select</td>

</tr>
</table>
</body>
</html>

由于

Answer 1

我不确定我是否理解你。但试试这段代码。

    <table id="myTable" cellspacing="0" cellpadding="0">
        <tr>
            <td class="bgrd" onclick="setColor(this)">
            Select</td>
            <td class="bgrd" onclick="setColor(this)">
            Select</td>
            <td class="bgrd" onclick="setColor(this)">
            Select</td>

        </tr>
        <tr>
            <td class="bgrd" onclick="setColor(this)">
            Select</td>
            <td class="bgrd" onclick="setColor(this)">
            Select</td>
            <td class="bgrd" onclick="setColor(this)">
            Select</td>

        </tr>


        <tr>
            <td class="bgrd" onclick="setColor(this)">
            Select</td>
            <td class="bgrd" onclick="setColor(this)">
            Select</td>
            <td class="bgrd" onclick="setColor(this)">
            Select</td>

        </tr>

        <tr>
            <td class="bgrd" onclick="setColor(this)">
            Select</td>
            <td class="bgrd" onclick="setColor(this)">
            Select</td>
            <td class="bgrd" onclick="setColor(this)">
            Select</td>

        </tr>

        <tr>
            <td class="bgrd" onclick="setColor(this)">
            Select</td>
            <td class="bgrd" onclick="setColor(this)">
            Select</td>
            <td class="bgrd" onclick="setColor(this)">
            Select</td>

        </tr>

        <tr>
            <td class="bgrd" onclick="setColor(this)">
            Select</td>
            <td class="bgrd" onclick="setColor(this)">
            Select</td>
            <td class="bgrd" onclick="setColor(this)">
            Select</td>

        </tr>

        <tr>
            <td class="bgrd" onclick="setColor(this)">
            Select</td>
            <td class="bgrd" onclick="setColor(this)">
            Select</td>
            <td class="bgrd" onclick="setColor(this)">
            Select</td>

        </tr>
    </table>

    <script type="text/javascript">
        var answerRow = 5;
        var noOfCols = 3;

        function setColor(what)
        {
            if(what.className == 'bgrd_selected')
            what.className = 'bgrd';
            else
            what.className = 'bgrd_selected';
            if(what.parentNode.getElementsByClassName('bgrd_selected').length == noOfCols)
            {
                if(document.getElementById('myTable').getElementsByTagName('tr')[answerRow].getElementsByClassName('bgrd_selected').length == noOfCols)
                    alert('You win');
                else
                {
                    alert('Try again');
                var arr = document.getElementById('myTable').getElementsByTagName('td') ;
                    for(var i=0;i<arr.length;i++)
                    {
                        arr[i].className="bgrd";
                    }
                }
            }
        }

</script>
<style type="text/css">
    table {
    width:400px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    border:1px solid #000;
    }
    table td {border:1px solid #000;}
    .bgrd {background-color:#CCCCCC;cursor:pointer;}
    .bgrd_selected {background-color:#FFCC00;cursor:pointer;}

</style>

Answer 2

如果有正确的答案，您需要唯一地确定每种可能性。我使用了id标签

<强> HTML

<table cellspacing="0" cellpadding="0">
<tr>
    <td class="bgrd" id="A1" onclick="setColor(this)">Select</td>
    <td class="bgrd" id="A2" onclick="setColor(this)">Select</td>
    <td class="bgrd" id="A3" onclick="setColor(this)">Select</td>
</tr>
<tr>
    <td class="bgrd" id="B1" onclick="setColor(this)">Select</td>
    <td class="bgrd" id="B2" onclick="setColor(this)">Select</td>
    <td class="bgrd" id="B3" onclick="setColor(this)">Select</td>
</tr>
[ ... ]

接下来， Javascript 。这需要定义正确的答案，切换用户单击的元素的类名，然后计算所选元素的数量和所选的正确答案的数量。最后，如果所选的数字与正确答案的数量相匹配，那么他们就是对了！

var answers = ["A1","B2","C3"];

function setColor(what){
    // Toggle the class name for the selected element
    what.className = (what.className == 'bgrd' ? 'bgrd_selected' : 'bgrd');

    // Set number of correct answers and selected answers to 0
    var numCorrect = 0,
        numSelected = 0;

    // Loop all relevant elements
    var thetds = document.getElementsByTagName('td');
    for(var i = 0; i < thetds.length; i++){
        // if an element is selected, add one to numSelected
        if(thetds[i].className == 'bgrd_selected'){
            numSelected++;
        }
    }

    // Loop all possible correct answers
    for(var i = 0; i < answers.length; i++){
        // If an answer is selected, add one to numCorrect
        if(document.getElementById(answers[i]).className == 'bgrd_selected'){
            numCorrect++;
        }
    }
    // Determine if there are the same number of numCorrect and numSelected as there are answers
    document.getElementById("out").innerHTML =
        (numCorrect == answers.length && numSelected == answers.length ? "Right" : "Try Again!");
}

http://jsfiddle.net/aWsCu/

当然，有几种方法可以做到这一点，这绝不是最好或最干净的......但是，这是一个开始。

在表格中选择正确的单元格时显示正确的答案

2 个答案: