1

我的一位同事编写了各种 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";
    }
}

该函数是从 HTML 调用的，带有如下所示的 onclick 事件：

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

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

所以，我知道我可能很厚，解决方案很简单，但如果可以的话，请帮忙。

4

3 回答 3

1

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

addSponsership(document.getElementById('IPQ_FUND1'));
addSponsership2(document.getElementById('IPQ_FUND2'));
// ...
于 2013-06-25T14:12:23.060 回答
1

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

<body onload="setHandlers()">

在该函数中，为您需要的任意数量的输入设置一个 onclick 处理程序：

function setHandlers() {
    document.getElementById('IPQ_FUND1').addEventListener('click', function(event) {
        addSponsership(event.target);
    });
    document.getElementById('IPQ_FUND2')...
}
于 2013-06-25T14:15:24.333 回答
0

实际上，您的解决方案看起来应该像上面发布的那样工作。下面是一个最小的概念验证。从这个问题很难判断您是否会将不同元素的值提供给您同事的功能，或者它们是否都将关闭相同的元素。下面的“addSponserShipLoad”函数假定第一种情况。如果第二种情况为真，您只需使用元素 id 作为函数的参数，并将返回的元素传递给所有被调用的函数。

jsFiddle 示例

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”，看看它在做什么。

于 2013-06-25T15:05:38.163 回答