以下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。首先,c.log
必须更改为console.log
才能:)为我工作。在那之后,我唯一改变的是div 的添加方式,因为它对我不起作用 insert
.我设置了一些测试数据,然后我去了...
编辑:也许您在两个复选框之间没有非标签标签,并且它变得混乱?请注意,我在label
和下一个复选框之间有一个br
,也许您需要执行类似操作。