액세스 "이"Fancybox 내부 옵션

Question

나는 다음과 같이 Fancybox 상자를 열 수있는 링크가 있습니다. Fancybox 도우미 함수 내에서 데이터 속성을 사용할 수있게하려고합니다. 아래 코드에서 $(this.element).data('id')을 사용해 보았습니다.

helpers: { 
    title: { 
     type: 'over' 
    }, 
    buttons: { 
     position: 'bottom', 
     tpl: '<div id="fancybox-buttons"><ul> \ 
              <li class="button"><a class="test-btn" data-id="' + $(this.element).data('id') + '" href="#"></a></li> \ 
             </ul></div>' 
    } 
} 

그러나 작동하지 않습니다. 데이터 속성을 가져 오는 것은 항상 도우미 함수 내에서 undefined을 반환합니다. 어떻게 작동 시키나요?

Answer 1

@ imagar는 대부분의 사람들에게 정상적으로 작동 할 수있는 훌륭한 솔루션을 제공했습니다. 그러나 Fancybox를 호출하는 데 사용 된 링크가 Ajax 요청을 통해 페이지에로드 되었기 때문에 그의 솔루션은 나에게 적합하지 않았습니다. 전역 변수를 선언 한 다음 $(this.element).data('id') 값을 Fancybox afterLoad 콜백의 전역 변수에 전달하여 해결했습니다.

afterLoad : function() { 
    my_global_var = $(this.element).data('id'); 
} 

그렇다면 헬퍼 옵션의 전역 변수를 간단하게 사용했습니다.

Answer 2

$(this.element).data('id')은 콜백을 바인딩 할 때 평가됩니다. this은 $.fancybox으로 전화하는 시점의 컨텍스트가됩니다.

팬시 박스를 앵커 태그에 바인딩하는 경우 이미 앵커 태그를 선택했습니다. 이 같은 것이 작동해야합니다 :

$('a.fancybox').each(funcion() { 
    var $a = $(this); 
    $a.fancybox({ tpl: "..." + $a.data('id') + "..." }); 
}); 

Answer 3

PHP로하는 것이 더 쉬울까요?

buttons : { 
position: 'bottom', 
tpl: '...<a class="test-btn" data-id="<?php echo $post->ID; ?>" href="#"></a>...' 
} 

문제는 당신이 콜백 기능에서 $(this.element)을 사용할 수 없다는 것입니다 ... 대신 템플릿 내에서 사용하려고합니다.