Question

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

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

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

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

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

使用Javascript，我想根据问题中的值显示div。因此，例如，如果值= a，我希望div1的显示更改为块。如果值= b，我希望div2的显示更改为块，如果值= c，我希望div 3的显示更改为块。

我对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'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');

JS Fiddle demo

解释这一行：

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

这将获取字符（在本例中为a），找到unicode字符点（a为97，b为98等），并减去{{1从该字符点开始，它给出了所使用的字符与97之间的“差异”。由于您已使用基于单一的编号方案对a元素'div属性进行了编号，因此我们将id添加到该差异中。

参考文献：

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

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

3 个答案: