2 qq 21325027 qq_21325027 于 2015.06.07 08:06 提问

js为元素绑定不同点击事件时出现问题

var sideRight = document.getElementById('sideright');
var side = document.getElementsByClassName('side-icon');
var flag = true;
for (var i = 0; i < side.length; i++) {
(function() {
if (flag) {
side[i].addEventListener('click', function() {
changeManyElem(sideRight, {
'right': 0
}, 30);
}, false);
flag = false;
} else {
side[i].addEventListener('click', function() {
changeManyElem(sideRight, {
'right': -350
}, 30);
flag = true;
}, false);
}
})();
}
这里我side的每一项绑定了两个点击事件
图片说明
效果就是点击每一项右边栏会划出,再点击一下会滑回去。
可是代码敲完之后发现点击第一项的时候会划出,再点击第一项的时候没反应,这时候点击第二项时会滑回去。
求高手指点迷津!!

5个回答

danielinbiti
danielinbiti   Ds   Rxr 2015.06.07 15:14
已采纳

悬赏的,上一个帖子还没结
if需要写到addEventListener里面。这上面每个节点只绑定了一个事件,不是2个。

bdmh
bdmh   Ds   Rxr 2015.06.07 08:56

你在浏览器中,调试一下脚本,看看第二次是什么问题

u013219899
u013219899   2015.06.07 11:25

表示。。强迫症伤不起。

     var sideRight = document.getElementById('sideright');
    var side = document.getElementsByClassName('side-icon');
    var flag = true;
    for (var i = 0; i < side.length; i++) {
            (function() {
                if (flag) {
                                        side[i].addEventListener('click', function() {
                                                                                                                                                                    changeManyElem(sideRight, { 'right': 0}, 30);
                                                                                                            }, false);
                                                    flag = false;
                                            } else {
                                                side[i].addEventListener('click', function() {
                                                                                                                                                                    changeManyElem(sideRight, {'right': -350
                                                                                                                                }, 30);
                                                        flag = true;
                                            }, false);
                                            }
            })();
    }
u013219899
u013219899   2015.06.07 11:29

应该是这样

 var sideRight = document.getElementById('sideright');
var side = document.getElementsByClassName('side-icon');
var flag = true;
for (var i = 0; i < side.length; i++) {
(function() {
if (flag) {
side[i].addEventListener('click', function() {
changeManyElem(sideRight, {
'right': 0
}, 30);
}, false);
flag = false;
} else {
side[i].addEventListener('click', function() {
changeManyElem(sideRight, {
'right': -350
}, 30);
flag = true;//移动到标记A试试?
}, false);
//标记A
}
})();
}
showbo
showbo   Ds   Rxr 2015.06.07 17:33

绑定过一个事件就好了吧,然后判断下flag设置不同的right值

     var sideRight = document.getElementById('sideright');
    var side = document.getElementsByClassName('side-icon');
    var flag = false;
    for (var i = 0; i < side.length; i++)
        side[i].addEventListener('click', function () {
            flag = !flag;///
            changeManyElem(sideRight, {
                'right': flag ? 0 : -350///
            }, 30);
        }, false);
Csdn user default icon
上传中...
上传图片
插入图片