입력 포커스시 하이라이트 행

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>의를 찾고, 당신은 그 다음 .getParent() 방법을 사용하여 부모를 참조 var list = $$('#ChronoContact_lensorder div.formrow input');을 사용하여 실제 <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' 
    }); 
}); 

}); 
}); 

테스트되지 않은 코드입니다. 두 번째 이벤트가 이제 focus 대신 blur이거나 두 이벤트가 동시에 실행되고 서로의 효과를 되돌릴 수 있습니다.