는, JS 내가 같이 정의 PrimeFaces <code><p:selectOneMenu></code>을 사용하는 복합 구성 요소가 마지막 구성 요소

Question

에서만 작동

function inOutChanged() { 
    var inOut = $({cc.clientId}:inOut); 
    if(inOut.val() == "INC") { 
    slider.addClass("includedInRange"); 
    } 
} 

만 페이지에 존재하는 경우이 복합 컴포넌트는 잘 작동 같은 inOutChanged() 함수를 정의하는 구성 요소의 일부로서 포함. 문제는 페이지에 4 개가 있어야한다는 것입니다. 따라서 하나의 컴포지트 구성 요소 선택을 변경하면 마지막 구성 요소의 슬라이더 클래스가 변경됩니다. 나는 이것이 실제로 페이지 내에 정의 된 4 inOutChanged() 함수에 있기 때문이라고 생각합니다.

함수를 범위 지정하거나 고유하게 이름을 지정하여 서로를 강타하지 않을 방법이 있습니까?

Answer 1

전역 범위에서 동일한 JavaScript 변수 slider을 다시 선언하고 다시 지정했기 때문에 구체적인 문제가 발생했습니다. slider의 선언을 함수 내부로 이동해야합니다.

똑같은 기능을 재 선언해도 해를 끼치 지 않지만 비효율적이며 DRY이 아닙니다. 함수를 자체 .js 파일로 이동하고 <h:outputScript>을 사용하여 함수를 포함해야합니다. JSF는 궁극적으로 그것을 한 번만 포함합니다. 그런 다음 변수를 인수로 취하도록 함수를 변경하십시오. 이 내부 /resources/composite/some.js이

<h:outputScript library="composite" name="some.js" target="head" /> 
... 
<h:panelGroup id="..."> 
    <p:selectOneMenu ... onchange="inOutChanged(this)"> 
     ... 
    </p:selectOneMenu> 
    ... 
    <p:slider ... /> 
</h:panelGroup> 

같은

뭔가

function inOutChanged(menuElement) { 
    var $menu = $(menuElement); 
    if ($menu.val() == "INC") { 
     $menu.parent().find(".ui-slider").addClass("includedInRange"); 
    } 
} 

Answer 2

당신은 당신의 변경 이벤트 리스너 내에서 $(this) 선택기를 사용한다 : I 구성 요소의 범위를 벗어난 onchange를 이벤트 리스너를 구속하고, 첨부 된 CSS 클래스에 내놓고 구성 요소를 발견

$(".inOut").change(function(){ 
    var sel = $(this).find('option:selected').text(); 
    if(sel == 'INC') { 
     //find slider and add class 
    } 
}); 

참고. 이것은 $(document).ready() 내에서 수행 할 수 있습니다.

물론 JS 함수에서 클라이언트 ID를 사용하거나 해당 함수를 구성 요소의 특성에 바인딩 할 수도 있습니다.