如何在Javascript中显示基于变量的特定DIV

我有一个加载以下Javascript对象字段的页面：

如您所见，最后一个属性包含变量question和值a

在HTML中，我有三个div，每个div都包含一种显示样式：none

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

如何编写基于Javascript中的变量显示特定div的脚本？我想我得用一个if。。。然后else或switch语句的类型。我是否需要首先声明三个变量并通过Id获取3个div的元素？我的第一个想法是这样的。。。但我显然被卡住了：

<script type="text/javascript">

    var a = document.getElementById('div1');
    var b = document.getElementById('div2');
    var c = document.getElementById('div3');

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

</script>

---

如果这是一个超级简单的问题，我道歉！试着以身作则。希望您能深入了解如何实现这一目标。非常感谢

我会将您的div ID存储在一个对象中，该对象的键设置为fields.question属性

---

一种方法是使用对象

var upgrades = {
    a : document.getElementById('upgrade1'),
    b : document.getElementById('upgrade2'),
    c : document.getElementById('upgrade3')
}

然后，当您想要访问它时，可以更改样式

upgrades[fields.question].style.display='block'

---

由于您的问题显示div元素的id属性前缀为'div'，以下代码将与该代码一起使用，但实际上您可能希望将'div'id前缀更改为'upgrade'：

function showQuestion (details, prefix) {
    // which question:
    var q = details.question.toLowerCase(),
        // find the integer:
        n = (q.charCodeAt(0) - 97) + 1;
    // get the element, and set its display to 'block':
    document.getElementById(prefix + n).style.display = 'block';
}

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

// call the function, passing in the relevant object, and the 'id'-prefix
showQuestion(fields, 'div');

要解释这句话：

n = (q.charCodeAt(0) - 97) + 1;

在本例中，取字符a，找到unicode字符点a是97，b是98，以此类推，然后从该字符点减去97，从而得出所用字符和a之间的“差异”。因为您已经使用基于一的编号方案对div元素的id属性进行了编号，所以我们在该差异上添加了1

参考资料：

. .

---

嘿@tymeJV-谢谢，我试过这么做，但我在控制台中看到了以下错误：TypeError:“null”不是对象求值文档。getElementByIdlookup[fields.question]。style“意味着字段为null”`结果字段是对象而不是变量。。。你认为这是我的问题吗？该对象存储在哪个变量中？变量称为字段。id以“upgrade”开头的元素在哪里？Hi@DavidThomas-my mad，“upgrade”应该是“div”-更新问题以反映。在这种情况下，我的答案应该适用于你；请问您是否尝试过？谢谢@AlexCheuk–我尝试过这样做，但在我的控制台中出现以下错误：[error]TypeError:“null”不是一个评估“upgrades[fields.question]的对象。style'Hey@David Thomas谢谢，但它对我不起作用-请注意，var fields属性每次都会更改。。。所以约翰·史密斯只是一个样本数据。有什么想法吗？我认为您需要清楚地显示预期数据的可能结构，并解释如果对其施加任何限制，会发生什么。问题属性是否始终为字母字符？这是与您所问问题相关的唯一属性，其他字段如何相关？嘿，David–问题属性将有a、b或c。有三个div div1、div2、div3都默认设置为“无”。如果question属性包含，我希望div1显示为block。如果问题属性包含2，我希望div2显示为块，如果问题属性包含3，我希望div3显示为块。很抱歉，我之前不清楚-如果这有帮助，请告诉我。嗯，是的：这就是我的代码的作用，不是吗？我看不出哪里失败了。

upgrades[fields.question].style.display='block'

function showQuestion (details, prefix) {
    // which question:
    var q = details.question.toLowerCase(),
        // find the integer:
        n = (q.charCodeAt(0) - 97) + 1;
    // get the element, and set its display to 'block':
    document.getElementById(prefix + n).style.display = 'block';
}

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

// call the function, passing in the relevant object, and the 'id'-prefix
showQuestion(fields, 'div');

n = (q.charCodeAt(0) - 97) + 1;