1

この質問が寄せられたことは知っていますが、解決策がうまくいきません。画像が表示されません。画像のパスは正しいです。私は何を間違っていますか？

この質問に対する解決策を読みました: スライダー ハンドル イメージの 変更、2 つの矢印を持つ Jquery スライダー、および jquery スライダー イメージの変更。3 番目の解決策が最善のようですが、これを機能させる方法がわかりません。コピーして貼り付けましたが、これを機能させることができません。完全なコードは次のとおりです。

<!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>

ここに画像の説明を入力

これがスクリーンショットです。画像が表示されません。誰？

ありがとう。

4

1 に答える 1

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);
于 2012-05-25T20:02:28.973 に答える