Question

我的一位同事编写了各种Javsascript函数，这些函数显示某些HTML元素依赖于各种输入的答案。这是其中一个函数的示例，它们都非常相似。

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');">

但是尽管控制台没有显示任何错误，但这并没有起作用。

所以，我知道我可能很厚，而且解决方案很简单，但如果可以，请提供帮助。

Answer 1

您不必将所有内容都放在变量中：

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

Answer 2

在onload-event中，调用一个绑定所有处理程序的函数：

<body onload="setHandlers()">

在该功能中，根据需要为任意数量的输入设置onclick-handler：

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

Answer 3

实际上，您的解决方案应该像上面发布的那样工作。以下是最小的概念验证。很难从这个问题中判断出你是否会将不同元素的价值提供给你同事的职能，或者他们是否都会关注同一个元素。下面的“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”以查看它正在做什么。

在Javascript中引用包含'this'引用的另一个函数

3 个答案: