2013-06-25 35 views
1

我的一位同事編寫了各種Javsascript函數,它們根據各種輸入的答案顯示特定的HTML元素。這是其中一個功能的例子,它們都非常相似。在Javascript中引用包含'this'引用的另一個函數

function addSponsership(sponser) { 
    if (sponser.value == "N") { 
     document.getElementById('nameofperson').style.display = "block"; 
     document.getElementById('nameofpersonvalue').style.display = "block"; 
     document.getElementById('address').style.display = "block"; 
     document.getElementById('addressvalue').style.display = "block"; 
     document.getElementById('postcode').style.display = "block"; 
     document.getElementById('postcodevalue').style.display = "block"; 
     document.getElementById('telephone').style.display = "block"; 
     document.getElementById('telephonevalue').style.display = "block"; 
     document.getElementById('fax').style.display = "block"; 
     document.getElementById('faxvalue').style.display = "block"; 
     document.getElementById('emailaddress').style.display = "block"; 
    } 

    if (sponser.value == "NH") { 
     document.getElementById('nameofperson').style.display = "none"; 
     document.getElementById('nameofpersonvalue').style.display = "none"; 
     document.getElementById('address').style.display = "none"; 
     document.getElementById('th1').style.display = "none"; 
     document.getElementById('th8').style.display = "table-row"; 
    } 

    if (sponser.value == "Y") { 
     document.getElementById('nameofperson').style.display = "none"; 
     document.getElementById('nameofpersonvalue').style.display = "none"; 
     document.getElementById('address').style.display = "none"; 
    } 
} 

的功能是從一個onclick事件,看起來像這樣的HTML叫:

<input type="radio" name="IPQ_FUND1" id="IPQ_FUND1" value="Y" checked="checked" onclick="addSponsership(this);"/> 

我現在想打電話給所有的使用body元素的onload事件這些功能。但是,我不確定如何做到這一點。例如:

function callAllOtherFunctions() 
{ 
addSponsership(sponser) 
addSponsership2(sponser) 
addSponsership3(sponser) 
etc... 
} 

問題在於我無法找到一種方法來引用其值需要檢查的特定元素。理想情況下,我需要找到一個解決方案,而不需要編輯我的同事寫的原始函數。

我試圖通過創建一個看起來像這樣的另一個功能單獨做到這一點:

function addSponsershipLoad(inputID){ 
    sponser = document.getElementById(inputID); 
    addSponsership(sponser); 
    } 

和編輯body標籤看起來像這樣:

<body onload="addSponserShipLoad('IPQ_FUND1');"> 

但儘管控制檯沒有顯示任何錯誤,這沒有奏效。

所以,我知道我可能會很厚,解決方案會很簡單,但如果可以,請幫助。

+0

根據發佈代碼「addSponsership」沒有'IPQ_FUND1'只是'N','NH'和'Y'的情況。這很可能是失敗的原因。 – abc123

+0

我想你不需要一個單獨的函數來傳遞贊助商對象。你可以這樣做,從body調用這個函數加載'callAllOtherFunctions(objId)',然後在callallotherfunctions中使用id提取對象引用。 'function callAllOtherFunctions(objId) { sponser = document.getElementById(objId); addSponsership(sponser) addSponsership2(sponser) addSponsership3(sponser)}' – dreamweiver

+0

你確定你正在傳遞一個輸入,代碼看起來很好看。也許你可以console.log中的一些變量在addSponsershipLoad中,比如'console.log(sponser); console.log(sponser.value)'和addSponsership:'console.log(sponser); console.log(sponser.value)' – HMR

回答

1

你不必把一切變量:

addSponsership(document.getElementById('IPQ_FUND1')); 
addSponsership2(document.getElementById('IPQ_FUND2')); 
// ... 
+0

由於它提到單個單選按鈕的狀態/值被認爲是身體負載,我們可以只提取一次id對象的id,並將其傳遞給addSponsership()等各種函數, addSponsership2()...等 – dreamweiver

+0

完美的作品。我知道這很簡單! –

1

在onload事件,調用結合的所有處理功能:

<body onload="setHandlers()"> 

在該功能中,設置一個onclick處理器爲您需要的儘可能多的輸入:

function setHandlers() { 
    document.getElementById('IPQ_FUND1').addEventListener('click', function(event) { 
     addSponsership(event.target); 
    }); 
    document.getElementById('IPQ_FUND2')... 
} 
+0

這聽起來很冒險,而且它會很有用,但上面的答案要簡單得多。謝謝你的幫助 :) –

0

它實際上看起來像你的解決方案應該像發佈波夫。下面是一個最小的概念驗證。很難從問題中分辨出您是否將不同元素的價值觀融入到了您的同事的職能中,或者他們是否都將關鍵點放在了同一元素上。下面的「addSponserShipLoad」函數假設第一種情況。如果第二種情況是正確的,那麼只需使用元素id作爲函數的參數,並將返回的元素傳遞給所有被調用的函數。

jsFiddle example

HTML:

<body onload="addSponserShipLoad()"> 
<input type="radio" name="IPQ_FUND1" id="IPQ_FUND1" value="Y" checked="checked" onclick="addSponsership(this);"/> 
<input type="text" name="nameofperson" id="nameofperson" value="A. Person" /> 

JS:

function addSponserShipLoad() { 
    addSponsership(document.getElementById("IPQ_FUND1")); 
} 

function addSponsership(sponser) { 
    if (sponser.value == "N") { 
     document.getElementById('nameofperson').style.display="block"; 
    } 
    if (sponser.value == "NH") 
    { 
     document.getElementById('nameofperson').style.display="none"; 
    } 
    if (sponser.value == "Y") { 
     document.getElementById('nameofperson').style.display="none"; 
    } 
} 

編輯:在撥弄改變 「IPQ_FUND1」 元素爲 「N」 的值看看它在做什麼。

相關問題