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

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> S，你可能想使用var list = $$('#ChronoContact_lensorder div.formrow input');然后参考使用.getParent()方法父寻找实际<input>如有必要，如下所示：

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，否则两个事件将同时触发并可能恢复对方的效果！