输入焦点时突出显示表单行

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

您可能希望使用var list = $$('#ChronoContact_lensorder div.formrow input'); 查找实际的<input>，而不是寻找<div>s，然后在必要时使用.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，否则两个事件将同时触发并可能恢复彼此的效果！