如何基于对象的属性值

我有一个网页，加载以下对象上显示的内容：如何基于对象的属性值

var fields = {"age":"on","email":"[email protected]","firstname":"John","lastname":"Smith","officialrules":"on","question":"a"};

每个属性的值是动态的，基于什么用户先前页面上输入的变化。

最后一个属性，问题，可以有一个或b OR ç值。

在我的HTML页面中，有三个隐藏的div（每个都包含显示样式：无）。

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

使用JavaScript或jQuery的，我怎么能显示出基于问题属性值的特定的div？

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

如果问题属性包含值一个，我想DIV1显示为块。
如果问题属性包含值b，我想DIV2显示为块。
如果问题属性包含值Ç，我想DIV3显示为块。

当我在我的浏览器控制台玩，我能够实现我想，当我把下面的代码行的行为：

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

但我怎么可以让一个脚本这将在所有三种情况下自动工作？非常感谢。

来源

2014-01-30 Ori

重命名的div来天后，DIVB， divc等做

var id = 'div' + fields.question; 
var div = document.getElementById(id); 
if(div) div.style.display = 'block';

http://jsfiddle.net/GkmX2/

这是更可扩展一点，因为你可以不更新的代码添加额外的div。

来源

2014-01-30 20:29:30 Matt

这是真棒！我无法弄清楚如何解决它....但是这是对我工作： \t <脚本类型= “文/ JavaScript的”> \t \t $（函数（）{ \t \t \t VAR ID = 'DIV' + fields.question; \t \t \t变种的div =的document.getElementById（ID）; \t \t \t如果（DIV）div.style.display = '块'; \t \t}）; \t – Ori

我是新来的Javascript - 你能解释一下这是怎么回事，这使它工作？我想了解它为什么起作用以及我需要学习如何了解这一点。 – Ori

@Ori我会很高兴的，但你能在你的问题更具体？哪条线路没有意义？第1行：获取div id（diva，divb，divc）。第2行：获取文档元素对象。请参阅http://www.w3schools.com/jsref/met_doc_getelementbyid.asp第3行：将显示设置为阻止div对象。 – Matt

在jQuery中，这是简单的：

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

您可以后var fields声明把这个。

注意$(function() {意味着DOM后，将被执行的代码是准备

来源

2014-01-30 20:25:31 antyrat

我会重新命名潜水divadivb和divc，那就试试这个：

document.getElementById('div'+fields.question).style.display='block';

来源

2014-01-30 20:28:21 koosa

如果有三个固定值，您可以将div的id设置为它们表示的问题的相同值，并使用jquery显示div。像： $（“div＃div”+ fields.question）.show（）;

来源

2014-01-30 20:30:53 user3254376

我认为我会这样做的方式是将div与可能的值绑定。您可以使用id或class值来完成此操作。如果使用class值，则可能会根据question值（如果需要）显示多个元素，因此我会亲自执行该路线以提高灵活性。

像这样的事情会做你需要的东西：

HTML

<div id="div1" class="a"></div> 
<div id="div2" class="b"></div> 
<div id="div3" class="c"></div>

document.getElementsByClassName(fields.question).style.display='block';

来源

2014-01-30 20:31:44 talemyn

如何基于对象的属性值

回答

相关问题