Question

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

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

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

最后一个属性问题可以具有 a 或 b 或 c 的值。< / p>

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

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

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

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

如果问题属性包含值 a ，我希望 div1 显示为块。
如果问题属性包含值 b ，我希望 div2 显示为块。
如果问题属性包含值 c ，我希望 div3 显示为块。

当我在浏览器的控制台中玩游戏时，当我放下以下代码行时，我能够实现我想要的行为：

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准备好后将执行代码

Answer 2

将div重命名为diva，divb，divc等，并执行

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

http://jsfiddle.net/GkmX2/

由于您可以在不更新代码的情况下添加其他div，因此可以进行更多扩展。

Answer 3

我会重命名潜水diva divb和divc，然后尝试：

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

Answer 4

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

Answer 5

我认为我这样做的方法是将div与可能的值联系起来。您可以使用id或class值执行此操作。使用class值可以根据question值（如果需要）显示多个元素，因此我个人会走这条路线，以实现灵活性。 / p>

这样的事情可以满足您的需求：

<强> HTML

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

<强> JS

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

Answer 6

这怎么办..

var showDiv = function (hideID, showID) {
   $("#" + hideID).hide();
   $("#" + showID).show();
}

要更改Div时调用该函数。

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

6 个答案: