如何根据 Javascript 中的变量显示特定的 DIV

Question

我有一个页面加载以下 Javascript 对象 fields：

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

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

在 HTML 中，我有三个 div，每个都包含一个 display:none 样式。

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

使用 Javascript，我想根据 question 中的值显示 div。所以比如说如果value=a，我想让div1的显示变成block。如果value=b，我想让div2的显示变成block，如果value=c，我想让div3的显示变成block。

我对 Javascript 很陌生，所以不确定什么是处理这个问题的最佳方法。话虽如此，当我在浏览器控制台中玩耍时，我可以使用以下行来实现此效果：

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

如何编写一个脚本来根据我的 Javascript 中的变量显示特定的 div？我假设我将不得不使用 if...then...else OR switch 语句类型。我需要先声明三个变量并获取 3 个 div 的 Element By Id 吗？我的第一条思路是这样的……但我显然被卡住了：

<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>

如果这是一个超级简单的问题，我深表歉意！试图通过例子来学习。希望能深入了解如何实现这一目标。非常感谢！！

Answer 1

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

var lookup = {a:"upgrade1", b:"upgrade2", ...} //and so on
document.getElementById(lookup[fields.question]).style.display = "block";

Answer 2

一种方法是使用对象

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

那么当你想访问它来改变样式时

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

Answer 3

由于您的问题显示您的 div 元素的 id 属性带有前缀“div”，因此以下代码将与该代码一起使用（尽管实际上您可能希望更改“div”@987654326 @-prefix to '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');

JS Fiddle demo.

解释一下：

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

这将获取字符（在本例中为 a），找到 unicode 字符点（a 是 97，b 是 98，等等），然后从该字符点减去 97，得到使用的字符和a 之间的“差异”。因为您已使用从 1 开始的编号方案为您的 div 元素的 id 属性编号，所以我们将 1 添加到该差异中。

参考资料：

• String.charCodeAt()。
• String.toLowerCase()。