Question

我正在构建一个测验应用程序，对于其中的某些部分，我希望在加载页面时突出显示一些答案。

这些是按钮：

<input type="hidden" name="correct_answer" value="<?php echo (isset($correct_answer)) ?   $correct_answer : 'no corect answer';?>">
<button name="answer" value="A" class="btn btn-primary btn-lg">A</button>
<button name="answer" value="B" class="btn btn-primary btn-lg">B</button>
<button name="answer" value="C" class="btn btn-primary btn-lg">C</button>
<button name="answer" value="D" class="btn btn-primary btn-lg">D</button>
<button name="answer" value="E" class="btn btn-primary btn-lg">E</button>

你可以看到我正在加载一个隐藏的元素，里面有正确的答案。

所有后端都运行良好，但我似乎无法弄清楚如何做到这一点。

是否可以在本机JS中执行此操作或者必须使用jQuery？另外，我该怎么做呢？如何确保将CSS类添加到正确的元素中？

修改

这是我最终使用的代码：

<script type="text/javascript">
document.getElementById("<?php echo $correct_answer;?>").style.backgroundColor = "green";
</script>

Answer 1

您可以使用backgroundColor，

使用vanila javascript执行此操作

所以你的js代码看起来像：

document.getElementById("answer1").style.backgroundColor = "red";

Working Fiddle

请注意，我为一个元素设置了Id，但是您可以为所有元素设置并使用其背景要更改的ID。

Answer 2

这是一个纯JavaScript解决方案，可以与您现有的HTML配合使用：

var correct= document.getElementsByName('correct_answer')[0].value;
var buttons= document.getElementsByName('answer');
for(var i = 0 ; i < buttons.length ; i++) {
  if(buttons[i].value===correct) {
    buttons[i].style.background= 'red';
    break;
  }
}

在http://jsfiddle.net/qw7qhvnq/

处小提琴

Answer 3

由于您已经使用PHP渲染页面，为什么不让它为要突出显示的元素添加一个类。

<button name="answer" value="A" class="btn btn-primary btn-lg <?php if ($correct_answer === "A") { ?>highlight<?php } ?>">A</button>

然后设置该类：

.highlight {
    background-color: red;
}

即使你使用javascript来解决这个问题，添加一个类要比为一个元素添加样式要好得多。该类更具语义性，可以轻松地重新设计，而无需深入挖掘代码。

突出显示页面加载上的特定按钮

3 个答案: