用于替换复选框和闭包的js代码

时间:2011-05-10 14:12:35

标签: javascript events checkbox closures prototypejs

以下javascript(原型1.6)代码隐藏页面上的所有复选框,并插入带有一些css样式和click事件的div元素作为假复选框。它还会在复选框的下一个(或上一个)查找标签,以触发相同的事件。

当我点击div(fake_el)本身时,一切都按预期工作,但是当我对标签尝试相同时,它只能工作一次。在那之后,el不会改变 - 好像它(el)将是一个值参数。

这里有什么想法吗?

    $$('input[type=checkbox]').each(function(el) {
        if (el.visible()) {
            var fake_el = new Element('div', { className:'checkbox checkbox_' + el.checked });
            var label = (el.next() != null && el.next().tagName === 'LABEL' && el.next().readAttribute('for') === el.id) ? el.next() : undefined;
            label = (el.previous() != null && el.previous().tagName === 'LABEL' && el.previous().readAttribute('for') === el.id) ? el.previous() : label;
            var action = function(el) {
                el.checked = (el.checked) ? false : true;
                fake_el.className = 'checkbox checkbox_' + el.checked;
            }

            fake_el.observe('click', function() { action(el); });
            if (label != null) { label.observe('click', function() { c.log(el); action(el); c.log(el); }); }
            el.insert({ after:fake_el }).hide();
        }
    });

1 个答案:

答案 0 :(得分:1)

我更改了几个项目并为此创建了jsFiddle。首先,c.log必须更改为console.log才能为我工作:)。在那之后,我唯一改变的是如何添加div,因为它不适用于我insert。我设置了一些测试数据然后我去了...

编辑:也许你在两个复选框之间没有非标签标签而且它变得混乱了?请注意,我在br和下一个复选框之间有一个label,也许您需要做类似的事情。