如何基於對象的屬性值

我有一個網頁，加載以下對象上顯示的內容：如何基於對象的屬性值

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

如何基於對象的屬性值

回答

相關問題