0

重複の可能性：
Javascriptは配列の最後のアイテムの属性のみを設定します

基本的なjavascript+dom学習に飛び込んだばかりですが、最後の要素だけが切り替えられていることを完全に理解できませんか？なぜイベントを要素にアタッチするのか迷っていますが、以前のイベントも上書きしているようです。

JavaScript：

window.onload = function() {
    // Simple log
    var c = function(x) {
        return console.log(x);
    };

    var hasClass = function(ele, cls) {
        return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
    };

    var toggleClass = function(ele, cls) {
        if (!hasClass(ele, cls)) {
            ele.className += " " + cls;


        } else {
            var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
            ele.className = ele.className.replace(reg, '');
        }
    };

    var toggle = function(clk) {
        c(clk);
    }

    var el = document.getElementsByClassName('time');
    for (i = 0; i < el.length; i++) {
        var btnToggle = el[i].getElementsByClassName('btn-toggle')[0];
        var clk = el[i].getElementsByClassName('clock')[0];
        btnToggle.addEventListener('click', function() {
            toggle(clk)
        }, false);
    }
};​

HTML： 

<section>
    <div class="time">
        <a href="#" class="btn-toggle">Show the time</a>
        <div class="clock">Clock1</div>
    </div>

    <div class="time">
        <a href="#" class="btn-toggle">Show the time</a>
        <div class="clock">Clock2</div>
    </div>

    <div class="time">
        <a href="#" class="btn-toggle">Show the time</a>
        <div class="clock">Clock3</div>
    </div>

</section>

賢者のアドバイスをありがとう！

4

1 に答える 1

3

クロージャーを追加する必要があります。

for ( i=0;i<el.length;i++ ) {
    var btnToggle = el[i].getElementsByClassName('btn-toggle')[0];
    var clk = el[i].getElementsByClassName('clock')[0];
    (function(){
        var x = clk;
        btnToggle.addEventListener('click', function(){toggle(x)}, false);
    })();
}

このように、すべての反復には「プライベート」スコープclkがあり、オーバーライドされません。

于 2012-05-21T11:57:06.813 に答える