1

我在互联网上搜索了一个解决方案，我已经无能为力了。我已经用 Javascript 进行了几个星期的试验，但在我的一生中，我无法让这个新项目工作。

我最初的目标是为我为我的一门课程开发的在线测验的所有正确答案加粗。我可以很容易地使用 CSS 将正确答案加粗，并标有“正确”的类名，但我不能让 Javascript 执行命令以在单击按钮时执行相同的操作。

如果有人可以帮助我解决这个问题，将不胜感激。ClearCorrectAnswers() 函数旨在反转 ShowCorrectAnswers() 的效果。

我一直在开发的 javascript 可以在下面找到：

function ShowCorrectAnswers() {
    var correctAnswers = document.getElementsByClassName("Correct");

    for (var count = 0; count < correctAnswers.length; count++) {
        correctAnswers[count].style.fontWeight = "bold";
    }
}

function ClearCorrectAnswers() {
    var correctAnswers = document.getElementByClassName("Correct");

    for (var count = 0; count < correctAnswers.length; count++) {
        correctAnswers[count].style.fontWeight = "normal";
    }
}

HTML 同样可以在下面找到：

<input type="submit" value="Submit Test" onClick="ComputeGrade()">
<button type="button" onClick="ShowCorrectAnswers()">Show Correct Answer</button>
<button type="button" onClick="ClearCorrectAnswers">Clear Correct Answer</button>
<p>1. The external behavior of a system is described by _____.
    <br>
    <input type="radio" id="1" name="As1" value="1">
    <label class="Correct">A. functional models</label>
    <br>
    <input type="radio" id="2" name="As1" value="0">
    <label>B. structural models</label>
    <br>
    <input type="radio" id="3" name="As1" value="0">
    <label>C. behavioral models</label>
    <br>
    <input type="radio" id="4" name="As1" value="0">
    <label>D. interaction diagrams</label>
    <br>
    <input type="radio" id="5" name="As1" value="0">
    <label>E. statechart diagrams</label>
</p>
<p>2. An analyst depicts the static view of an information system with _____.
    <br>
    <input type="radio" name="As2" value="0">
    <label>
        <label>A. use-case models</label>
        <br>
        <input type="radio" name="As2" value="1">
        <label class="Correct">B. structural models</label>
        <br>
        <input type="radio" name="As2" value="0">
        <label>C. behavioral models</label>
        <br>
        <input type="radio" name="As2" value="0">
        <label>D. interaction diagrams</label>
        <br>
        <input type="radio" name="As2" value="0">
        <label>E. statechart diagrams</label>
</p>
<p>3. The two types of interaction diagrams are ______________ diagrams.
    <br>
    <input type="radio" name="As3" value="0">
    <label>A. use-case and sequence</label>
    <br>
    <input type="radio" name="As3" value="0">
    <label>B. class and sequence</label>
    <br>
    <input type="radio" name="As3" value="1">
    <label class="Correct">C. sequence and communication</label>
    <br>
    <input type="radio" name="As3" value="0">
    <label>D. object and communication</label>
    <br>
    <input type="radio" name="As3" value="0">
    <label>E. statechart and object</label>
</p>
4

2 回答 2

0 
<script>
function ShowCorrectAnswers() {
    var correctAnswers = document.getElementsByClassName("Correct");

    for (var count = 0; count < correctAnswers.length; count++) {
        correctAnswers[count].style.fontWeight = "bold";
    }
}

function ClearCorrectAnswers() {

    var correctAnswers = document.getElementsByClassName("Correct");

    for (var count = 0; count < correctAnswers.length; count++) {
        correctAnswers[count].style.fontWeight = "normal";
    }
}
</script>

和 HTML：

<input type="submit" value="Submit Test" onClick="ComputeGrade()">
<button type="button" onClick="ShowCorrectAnswers()">Show Correct Answer</button>
<button type="button" onClick="ClearCorrectAnswers()">Clear Correct Answer</button>

<p>1. The external behavior of a system is described by _____.<br>
    <input type="radio" id="1" name="As1" value="1"><label class="Correct"> A. functional models</label><br>
    <input type="radio" id="2" name="As1" value="0"><label> B. structural models</label><br>
    <input type="radio" id="3" name="As1" value="0"><label> C. behavioral models</label><br>
    <input type="radio" id="4" name="As1" value="0"><label> D. interaction diagrams</label><br>
    <input type="radio" id="5" name="As1" value="0"><label> E. statechart diagrams</label>
</p>


<p>2. An analyst depicts the static view of an information system with _____.<br>
    <input type="radio" name="As2" value="0"><label><label> A. use-case models</label><br>
        <input type="radio" name="As2" value="1"><label class="Correct"> B. structural models</label><br>
        <input type="radio" name="As2" value="0"><label> C. behavioral models</label><br>
        <input type="radio" name="As2" value="0"><label> D. interaction diagrams</label><br>
        <input type="radio" name="As2" value="0"><label> E. statechart diagrams</label>
</p>

<p>3. The two types of interaction diagrams are ______________ diagrams.<br>
    <input type="radio" name="As3" value="0"><label> A. use-case and sequence</label><br>
    <input type="radio" name="As3" value="0"><label> B. class and sequence</label><br>
    <input type="radio" name="As3" value="1"><label class="Correct"> C. sequence and communication</label><br>
    <input type="radio" name="As3" value="0"><label> D. object and communication</label><br>
    <input type="radio" name="As3" value="0"><label> E. statechart and object</label>
</p>
于 2013-04-18T06:07:14.930 回答
0

你最好在 CSS 中做艰苦的工作，只切换一次父类，而不是遍历每个.correct标签。

所以，假设你有这个 HTML：

<form id="quiz">
    ...
</form>

你会在某个地方有这个 CSS：

<style>
#quiz.showAnswers .correct {
    font-weight: bold;
}
</style>

而这个JavaScript：

<script>
function showCorrectAnswers () {
    document.getElementById('quiz').className = 'showAnswers';
}

function clearCorrectAnswers () {
    document.getElementById('quiz').className = '';
}
</script>
于 2013-04-18T08:26:57.420 回答