突出顯示當輸入被聚焦時的表格行

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，否則兩個事件將同時觸發並可能恢復對方的效果！