js代码替换复选框和闭包答案

【问题标题】：js code to replace checkbox and closuresjs代码替换复选框和闭包
【发布时间】：2011-08-22 12:35:17
【问题描述】：

下面的 javascript（原型 1.6）代码隐藏了页面上的所有复选框，并插入了一个具有一些 css 样式的 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();
        }
    });

【问题讨论】：

为我工作。 jsfiddle.net/BdT3p

标签： javascript events checkbox closures prototypejs

【解决方案1】：

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

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

【讨论】：