引用另一个包含'这'Javascript中的引用

Referencing another function containing a 'this' reference in Javascript

本文关键字：引用 Javascript 另一个 包含      更新时间：2023-09-26

我的一位同事编写了各种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 onload="addSponserShipLoad('IPQ_FUND1');">

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

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

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

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

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

<body onload="setHandlers()">

在该函数中，根据需要为任意多的输入设置onclick处理程序：

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

实际上，您的解决方案应该像上面发布的那样工作。以下是概念的最低限度证明。很难从这个问题中判断出你是否会将不同元素的值输入到同事的函数中，或者它们是否都会关闭同一个元素。下面的"addSponserShipLoad"函数假设了第一种情况。如果第二种情况为true，则只需使用元素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";
    }
}

编辑：将fiddle中的"IPQ_FUND1"元素的值更改为"N"，以查看它在做什么。

相关文章：