1

実際、私はこの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を使用して、2つのを表示/非表示にするという非常に単純なことを実現してい<span>ます。

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を使用したいと思います。

前もって感謝します！

4

3 に答える 3

1

それらすべてに同じクラスを与えます。

使用するdocument.getElementsByClassName

例えば：

var clickables = document.getElementsByClassName('clickme');
for(var i = 0; i < clickables.length; i++){
     clickables[i].onclick = function(){
           //some click fn
     }
}
于 2011-10-18T14:55:43.247 に答える
1

あなたは確かにいくつかのループで物事を単純化することができます：

elements = document.getElementsByName('change');

for (var i = 0; i < elements.length; i++) {
    elements[i].onclick = function() {
        document.getElementsByName('ph')[i].style.display = 'block';  
    }
}

cancels = documents.getElementsByName('cancel');

for (i = 0; i < cancels.length; i++) {
    cancels[i].onclick = function () {
        this.parentNode.style.display = 'none';
        cancels[i].parentNode.style.display = 'block';
        cancels[i].parentNode.style.width = '100%';
    }
}
于 2011-10-18T14:57:58.073 に答える
0

JQueryでこれを行うには、を使用できますが、名前をセレクターとして使用する方法がわからないため、代わりに.each()使用するマークアップを変更する必要があると思います。方法があれば教えてください！classname

$('.change').each(function(){
   $(this).click(function(){
      // Click function for 'change'
   });
});

$('.cancel').each(function(){
   $(this).click(function(){
      // Click function for 'cancel'
   });
});
于 2011-10-18T15:24:09.757 に答える