4

以下にコードを書きました。ここで私がやろうとしているのは、右の3つのセルを選択すると、「右」というメッセージが表示され、そうでない場合は「再試行」と表示されるはずです。これまでのところ、私のコードはセルのみを強調表示しています。次にどうすればいいのかしら？

   <!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>

ありがとう

4

2 に答える 2

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>
于 2012-11-27T06:03:05.187 に答える
1

特定の正解がある場合は、それぞれの可能性を一意に識別する必要があります。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/

もちろん、これを行うにはいくつかの方法があり、これは決して最良または最もクリーンな方法ではありません...しかし、それは始まりです。

于 2012-11-27T06:53:55.767 に答える