Question

我有以下Mootools 1.11代码（不可升级，因为这是在Joomla中），我想突出显示表格行，当它内的一个项目被聚焦时。但是，这不起作用。我需要知道如何访问表单项的父div。

window.addEvent('domready', function() {
    var list = $$('#ChronoContact_lensorder div.formrow');
    list.each(function(element) {

var fx = new Fx.Styles(element, {duration:200, wait:false});

element.addEvent('focus', function(){
    fx.start({
        'background-color': '#e6f0f2',
        color: '#FFF'
    });
});

element.addEvent('focus', function(){
    fx.start({
        'background-color': '#FFF',
        'color': '#2F9AD0'
    });
});

}); 
});

HTML是：

<div class="formrow"> 
<label for="ud">Uncut Diameter:</label> 
<input type="text" id="ud" name="ud" /> 
</div>

由于

Answer 1

您可能希望使用<div>查找实际的<input>，而不是查找var list = $$('#ChronoContact_lensorder div.formrow input');，然后在必要时使用.getParent()方法查找父级，像这样：

window.addEvent('domready', function() {
    var list = $$('#ChronoContact_lensorder div.formrow input');
    list.each(function(element) {

var fx = new Fx.Styles(element.getParent(), {duration:200, wait:false});

element.addEvent('focus', function(){
    fx.start({
        'background-color': '#e6f0f2',
        color: '#FFF'
    });
});

element.addEvent('blur', function(){
    fx.start({
        'background-color': '#FFF',
        'color': '#2F9AD0'
    });
});

}); 
});

未经测试的代码。请注意，第二个事件现在是blur而不是focus，否则两个事件将同时触发并可能会相互影响！

输入聚焦时突出显示表格行

1 个答案: