Question

我有一个使用HTML进行开发的测验，它在表格表格上进行表示并且在验证时，我需要使用绿色和错误的选择（红色）选择正确的选择（这是<td>标签）。背景属性），我怎么能在javascript中做到这一点？ thx提前

enter image description here

修改这是我的HTML代码：

<body id="question1" onLoad="InitializeTimer()">
<h2>Question 1/10</h2>
<div class="question1">
<form name="question">
<table>
<tr><td>1 fois</td><td><input type="radio" name="question1" value="1"></td></tr>
<tr><td>2 fois</td><td><input type="radio" name="question1" value="2"></td></tr> 
<tr><td>3 fois</td><td><input type="radio" name="question1" value="3"></td></tr>
<tr><td>4 fois</td><td><input type="radio" name="question1" value="4"></td></tr>
</table>
</form>
</div>
</body>

使用javascript进行测试时，我需要在此代码中执行上述操作：

 if(document.question.question1[3].checked)
            {//that is true, color the background of the <td> tag in green}
            else
            {//that is wrong, color the background of the <td> tag in red}

Answer 1

JQuery解决方案： 这样的事情应该有效：

<table>
<tr id="answer1">
    <td>1</td>
    <td><input type="radio" name="test" value="1"/></td>
</tr>
<tr id="answer2">
    <td>2</td>
    <td><input type="radio" name="test" value="2"/></td>
</tr>
<tr id="answer3">
    <td>3</td>
    <td><input type="radio" name="test" value="3"/></td>
</tr>
</table>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
<script>
    $(document).ready( function() {
        $("input[type=radio]").click(function(evt) {
            var color = 'red';
            if ($(this).val() == '2') {
                color = 'green';
            }

            $("#answer" + $(this).val() + " td").css("backgroundColor", color);
        });
    });
</script>

如果选择单选按钮，这将不会清除旧的背景颜色，但它是一个开始。

简单的Javascript解决方案

<table>
<tr id="answer1">
    <td>1</td>
    <td><input type="radio" name="test" value="1" onClick="checkAnswer(this)"/></td>
</tr>
<tr id="answer2">
    <td>2</td>
    <td><input type="radio" name="test" value="2" onClick="checkAnswer(this)"/></td>
</tr>
<tr id="answer3">
    <td>3</td>
    <td><input type="radio" name="test" value="3" onClick="checkAnswer(this)"/></td>
</tr>
</table>

<script>
function checkAnswer(form) {
    var color = 'red';
    if (form.value == '2') {
       color = 'green';
    }

    form.parentNode.style.backgroundColor = color;
    form.parentNode.previousSibling.previousSibling.style.backgroundColor = color;
}
</script>

Answer 2

您可以使用关联数组来查看单击的问题是否选中了正确的答案。这个解决方案是用jquery编写的，所以你需要链接到像<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>这样的源代码才能使这个代码工作

$(document).ready(function(){
    var answerArray = { "question1": "answerNumber", "question2": "answerNumber" };
    $('#question input[type="radio"]').checked(function() {
        var questionNumber = $(this).attr("name");
        var answer = $(this).val();
        if (answerArray[questionNumber] == answer) {
            $(this).parent().css("backgroundColor", "green");
        } else {
            $(this).parent().css("backgroundColor", "red");
        }
    });
});

使用javascript更改指定的颜色

2 个答案: