2012-05-25 3 views
1

으로 처리하지만, 나는 솔루션은 동작하지 않습니다. 내 이미지가 보이지 않아. 이미지 경로가 정확합니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?은 내 자신의 이미지 나는이 질문에 요청했습니다 알고

나는이 질문에 대한 솔루션을 읽었습니다 : Jquery slider with two arrowsChanging slider handle image, 및 changing jquery slider images을. 세 번째 솔루션이 가장 좋은 것 같지만 어떻게 작동 시킬지 잘 모르겠습니다. 복사하고 붙여 넣었지만이 작업을 수행 할 수 없습니다. 여기에 전체 코드는 다음과 같습니다 여기

<!DOCTYPE html> 
<html> 
<head> 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery- 
ui.css" rel="stylesheet" type="text/css"/> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> 
</script> 
<script> 
$(window).load(function(){ 
//Used for slider with two arrows - start 
var firstHandleClass = 'first-handle'; 
var secondHandleClass = 'second-handle'; 

handle = $('#slider-range A.ui-slider-handle'); 
handle.removeClass('ui-corner-all'); 
handle.removeClass('ui-slider-handle'); 
handle.addClass('handle_'); 
handle.eq(0).addClass(firstHandleClass); 
handle.eq(1).addClass(secondHandleClass);  

}); 
</script> 
    <script> 
    $(document).ready(function() { 
    $("#slider").slider({ 
range: true, 
values: [5,17] 
}); 
    }); 
    </script> 


    <style type="text/css"> 

    #slider { margin: 10px; } 
.handle_ { 
    cursor: default; 
    position: absolute; 
    top: -0.3em; 
    z-index: 2; 
    } 
.first-handle { 
    background: url("images/lefthandle.gif") no-repeat scroll 0 0 transparent; 
    border-style: none; 
    height: 36px; 
    margin-left: -9px; 
    position: absolute; 
    width: 21px; 
} 
.second-handle { 
    background: url("images/righthandle.gif") no-repeat scroll 0 0 transparent; 
    border-style: none; 
    height: 36px; 
    margin-right: -5px; 
    position: absolute; 
    width: 21px; 
} 
    </style> 

    </head> 
    <body style="font-size:62.5%;"> 

    <div id="slider"></div> 


</body> 
</html> 

enter image description here

이 스크린 샷입니다. 이미지가 표시되지 않습니다. 누군가?

감사합니다.

+0

내가 불을 지르고의 코드와 새로운 클래스'첫 handle' 광고 '두 번째 handle'가 추가되지 않습니다 보았다. – Chris22

답변

1

선택기 '#slider-range a.ui-slider-handle'과 (와) 일치하는 요소가 없습니다. '#slider a.ui-slider-handle'로 교체하여 문제가 해결되는지과 같이, 참조 :

handle = $('#slider A.ui-slider-handle'); 
handle.removeClass('ui-corner-all'); 
handle.removeClass('ui-slider-handle'); 
handle.addClass('handle_'); 
handle.eq(0).addClass(firstHandleClass); 
handle.eq(1).addClass(secondHandleClass);