두 요소의 매칭 변수 (바인딩주기 및 사용자 정의 가능)

Question

#div_x가 별도의 요소 img_x와 관련되도록 스크립트를 압축하는 데 도움이 필요합니다.

내 프로젝트는 ui-selectable을 사용하여 맵에서 포인트를 잡고 jquery 사이클 (여기 http://bit.ly/gH7Lm3과 같이)을 통해 별도 div에서 이미지 세트를 반환합니다.

나는 'selectablestop'이벤트를 .hasClass와 .append의 두 함수로 묶어 놓았다. 1) 점이 선택되었는지 감지하고 2) 해당하는 이미지와 함께 포함 된 div를 덧붙인다. , 그것의 자신의 div 안에 포함되는). 그대로 보인다 :

$("#selectable").selectable().bind("selectablestop", function(event, ui) { 
if($('#point_a').hasClass('ui-selected')){ 
$('#cycle').append('<div id="pic"><img src="image_a.jpg" /></div>');} 

if($('#point_b').hasClass('ui-selected')){ 
$('#cycle').append('<div id="pic"><img src="image_b.jpg" /></div>');} 

if($('#point_c').hasClass('ui-selected')){ 
$('#cycle').append('<div id="pic"><img src="image_c.jpg" /></div>');} 

등을

내 질문 :

내가 변수 X를 사용하는 대신 각 라인 매칭 point_a를 작성하는, 하나 개의 인수로이 작업을 수행 할 수 img_a, point_b ~ img_b 등.

if($('#point_(variable)').hasClass('ui-selected')){ 
$('#cycle').append('<div id="pic"><img src="image_(matching variable).jpg" /></div>');} 

감사합니다. 나는 좋은 접근 방식을 찾는 데 약간의 시간을 할애했다.

Answer 1

덕분에이 솔루션을 JQuery와 포럼을 통해 rdworth합니다 :

<li id="point_a" data-image="image_a.jpg">...</li> 
<li id="point_b" data-image="image_b.jpg">...</li> 


$(".ui-selected").each(function() { 
    $("#cycle").append("<div id='pic'><img src='" + $(this).data("image") + "'></div>"); 
});