На самом деле у меня есть этот фрагмент HTML-кода
<form method=POST action=dosomething.php>
<fieldset>
<legend>My account</legend>
<ul>
<li>
<label for=email>e-mail</label>
<span>
<?=$account->email?>
(<a name="change">change</a>)
</span>
<span name="ph">
<input id="email" name="email" placeholder="new email" type=email>
<br>
<button name="change_email">change</button> or <a name="cancel">undo</a>
</span>
</li>
<li>
<label for=foo>foo</label>
<span>
<?=$account->foo?>
(<a name="change">change</a>)
</span>
<span name="ph">
<input id="foo" name="foo" type=text>
<br>
<button name="change_foo">change</button> or <a name="cancel">undo</a>
</span>
</li>
</ul>
</fieldset>
</form>
Я повторил <li> ... </li>
раздел только 2 раза, но они повторяются несколько раз, и вы можете заметить, что есть часть, которая являетсяТо же самое для всех.
Я использую этот JavaScript для достижения очень простой вещи: показать / скрыть два <span>
s.
window.onload = function () {
/* email */
document.getElementsByName('change')[0].onclick = function () {
this.parentNode.style.display = 'none';
document.getElementsByName('ph')[0].style.display = 'block';
}
document.getElementsByName('cancel')[0].onclick = function () {
this.parentNode.style.display = 'none';
document.getElementsByName('change')[0].parentNode.style.display = 'block';
document.getElementsByName('change')[0].parentNode.style.width = '100%';
}
/* social id */
document.getElementsByName('change')[1].onclick = function () {
this.parentNode.style.display = 'none';
document.getElementsByName('ph')[1].style.display = 'block';
}
document.getElementsByName('cancel')[1].onclick = function () {
this.parentNode.style.display = 'none';
document.getElementsByName('change')[1].parentNode.style.display = 'block';
document.getElementsByName('change')[1].parentNode.style.width = '100%';
}
/* avatar */
document.getElementsByName('change')[2].onclick = function () {
this.parentNode.style.display = 'none';
document.getElementsByName('ph')[2].style.display = 'block';
}
document.getElementsByName('cancel')[2].onclick = function () {
this.parentNode.style.display = 'none';
document.getElementsByName('change')[2].parentNode.style.display = 'block';
document.getElementsByName('change')[2].parentNode.style.width = '100%';
}
/* shout */
document.getElementsByName('change')[3].onclick = function () {
this.parentNode.style.display = 'none';
document.getElementsByName('ph')[3].style.display = 'block';
}
document.getElementsByName('cancel')[3].onclick = function () {
this.parentNode.style.display = 'none';
document.getElementsByName('change')[3].parentNode.style.display = 'block';
document.getElementsByName('change')[3].parentNode.style.width = '100%';
}
}
Это оооочень ДЛИННО ..и повторяющийся.Как видите, единственная часть, которая изменяется, это getElementsByName('change')[aNumber]
.
Мой вопрос: Как я могу устранить избыточность?
Небольшое примечание: я быхотелось бы видеть решения jQuery, но я бы предпочел использовать чистый JS.
Заранее спасибо!