2013-06-25 64 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” 的值看看它在做什么。

相关问题