2013-06-25 3 views
1

Мой коллега написал различные функции Javsascript, которые отображают определенные элементы HTML, зависящие от ответов на различные входы. Это пример одной из функций, которые очень похожи.Ссылка на другую функцию, содержащую ссылку «this» в Javascript

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

Теперь я хочу, чтобы назвать все эти функции, используя событие OnLoad на элемент тела. Однако я не уверен, как это сделать. Пример:

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

Проблема в том, что я не могу найти способ, чтобы ссылаться на конкретные элементы, значения которых должны быть проверены. В идеале мне нужно найти решение этого без редактирования оригинальных функций, написанных моим коллегой.

Я пытался сделать это по отдельности, создавая еще одну функцию, которая выглядела так:

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

и редактирование тегов тела, чтобы выглядеть следующим образом:

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

, но, несмотря на консоли не показываются ошибок, это не сработало.

Итак, я знаю, что я, вероятно, довольно толстый, и решение будет простым, но, пожалуйста, помогите, если сможете.

+0

в соответствии с опубликованным кодом «addSponsership» не имеет случая для «IPQ_FUND1» только «N», «NH» и «Y».это, вероятно, причина неудачи. – abc123

+0

Думаю, вам не нужна отдельная функция для передачи объекта-спонсора. вы можете сделать это так, от тела вызовите эту функцию при загрузке '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

Поскольку он упоминается о статусе/значении одного переключателя при загрузке тела, мы можем извлечь объект по отношению к идентификатору только один раз и передать его различным функциям, таким как addSponsership(), addSponsership2() ... и т. д. – dreamweiver

+0

Работает отлично. Я знал, что это будет просто! –

1

В OnLoad-событие, вызовите функцию, которая связывает все обработчики:

<body onload="setHandlers()"> 

В этой функции, установите OnClick -handler для как можно большего количества входов:

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

Это звучит приключений, и, как было бы полезно, но ответ выше был намного проще. Спасибо за вашу помощь :) –

0

На самом деле это похоже на то, что ваше решение должно работать как отправлено Бова. Ниже приведено минимальное доказательство концепции. Трудно сказать из вопроса, будете ли вы кормить ценности разных элементов для своих функций коллеги, или если все они будут отключаться от одного и того же элемента. Функция «addSponserShipLoad» ниже принимает первый случай. Если второй случай истинен, вы просто используете идентификатор элемента как параметр для функции и передаете возвращенный элемент всем вызываемым функциям.

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"; 
    } 
} 

Edit: Изменение значения элемента "IPQ_FUND1" на "N" в скрипку посмотрите, что он делает.

Смежные вопросы