javascript - 如何根据对象属性值显示内容

Question

我有一个加载以下对象的页面:

var fields = {"age":"on","email":"useremail@gmail.com","firstname":"John","lastname":"Smith","officialrules":"on","question":"a"}; 

每个属性的值都是动态的，并根据用户在上一页上输入的内容而变化。

最后一个属性，问题，可以具有a或b或c的值。

在我的页面 HTML 中，有三个隐藏的 div(每个都包含 display:none 样式)。

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

使用 Javascript 或 jQuery，如何根据 question 属性中的值显示特定的 div？

换句话说，所有三个div都被设置为默认不显示。

• 如果question属性包含值a，我希望div1显示为 block 。
• 如果question属性包含值b，我希望div2显示为 block 。
• 如果question属性包含值c，我希望div3显示为 block 。

当我在浏览器的控制台中进行操作时，通过输入以下代码行，我能够实现我想要的行为:

if (fields.question == 'a') {document.getElementById('div1').style.display='block';}

但是我怎样才能制作一个能够自动适应所有三种情况的脚本呢？非常感谢。

Answer 1

在 jQuery 中这很简单:

$( function() {
    if (fields.question == 'a') $( '#div1' ).show();
    if (fields.question == 'b') $( '#div2' ).show();
    if (fields.question == 'c') $( '#div3' ).show();
});

您可以将其放在 var fields 语句之后。

注意，$( function() { 表示代码将在 DOM 准备好后执行