我使用JavaScript创建了一个静态HTML问答应用程序(包含200个问题)。现在,为了使其动态,我使用WebMatrix 3。数据库表由6列组成,即:问题、选项A、选项B、选项C、选项D和正确选项。这是我的"cshtml"文件的部分代码。。。
@foreach(var row in data){
<ol type="1" class='questions'>
<div class="qnum" >
<li><span id="qstn">@row.question:</span></li>
<ol id="q1" >
<li id="A"><span>@row.choiceA</span></li>
<li id="B"><span>@row.choiceB</span></li>
<li id="C"><span>@row.choiceC</span></li>
<li id="D"><span>@row.choiceD</span></li>
</ol></div>
</ol>
if(@row.correctchoice == A){
<script>
$("li#A").addClass("true");
</script>
}
if(@row.correctchoice == B){
<script>
$("li#B").addClass("true");
</script>
}
if(@row.correctchoice == C){
<script>
$("li#C").addClass("true");
</script>
}
if(@row.correctchoice == D){
<script>
$("li#D").addClass("true");
</script>
}
}
现在为了测试,我在数据库中只有4个问题,分别有正确的选择A、B、C、D。但上面的代码为我做到了这一点:对于第一个问题,"true"类被添加到所有列表项中。第二,增加到第二、第三和第四项。第三,它被添加到第三和第四个列表项中。仅针对第四至第四项。。。因此,不幸的是,以上代码仅适用于第4个问题。。。。。
我找到了解决方案。我将代码更新为..
@{
if(@row.correctchoice == A){
<li class="true"><span>@row.choiceA</span></li>
} else{ <li><span>@row.choiceA</span></li> }
if(@row.correctchoice == B){
<li class="true"><span>@row.choiceB</span></li>
} else{ <li><span>@row.choiceB</span></li> }
if(@row.correctchoice == C){
<li class="true"><span>@row.choiceC</span></li>
} else{ <li><span>@row.choiceC</span></li> }
if(@row.correctchoice == D){
<li class="true"><span>@row.choiceD</span></li>
} else{ <li><span>@row.choiceD</span></li> }
}
所以我们最好不要直接将JavaScript和数据库的动态内容联系起来。