JQuery UIスライダー：属性を使用して最小値と最大値を設定

Question

複数のスライダーを同じページで使用する必要があります。したがって、私はスライダのクラスを作成しました（したがってjqueryコードは1つだけです）。div30のという属性にの最大値と最小値を設定します。選択したスライダに応じて変更されます。

私は、ある時点でthisを使用する必要があると推測しています。そうしないと、すべてのクラスを対象とします。私はどこから始めるべきか、どこにどこを含めるべきかについてはわかりませんが。

HTML：：

<div class="slider" slider-min="15" slider-max="250" svalue="132"></div><span class="slider-value"></span> 
<div class="slider" slider-min="30" slider-max="300" svalue="165"></div><span class="slider-value"></span> 
<div class="slider" slider-min="100" slider-max="500" svalue="300"></div><span class="slider-value"></span> 

CSS：

.ui-slider { position: relative; text-align: left; background: #DADDD8; z-index: 0; } 
.ui-slider { -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5) inset; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5) inset; box-shadow: 0 1px 2px rgba(0,0,0,0.5) inset; } 
.ui-slider .ui-slider-handle { background: #8FB339; position: absolute; z-index: 2; width: 15px; height: 15px; border-radius:5px; cursor:pointer; } 
.ui-slider .ui-state-hover, .ui-slider .ui-state-active { background: #4B5842; } 
.ui-slider .ui-slider-range { background: #C7D59F; position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; } 
.ui-slider .ui-slider-range { -moz-box-shadow: 0 1px 2px rgba(17,35,45,0.6) inset; -webkit-box-shadow: 0 1px 2px rgba(17,35,45,0.6) inset; box-shadow: 0 1px 2px rgba(17,35,45,0.6) inset; } 


.ui-slider-horizontal { height: 5px; width:100px; margin:5px auto; } 
.ui-slider-horizontal .ui-slider-handle { top: -5px; margin-left: -5px; } 
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } 
.ui-slider-horizontal .ui-slider-range-min { left: 0; } 
.ui-slider-horizontal .ui-slider-range-max { right: 0; } 

.slider-value{ 
    font-size:12px; 
    float:right; 
    margin-top:-16px; 
    margin-right:5px; 
} 

JS/jQueryの今の

は、私はちょうどここにある、基本的なコードを適用しました：

$(function() { 
    var div = $(".slider"); 
    $(".slider").slider({ 
     range: "min", 
     slide: function(event, ui) { 
       $(".slider-value").html(ui.value); 
      }, 
     min: div.data("slider-min"), 
     max: div.data("slider-max"), 
     value: div.data("svalue"), 
})}); 

$(".slider-value").html( $(this).slider('value')); 

Hereはjsfiddle

で、このデモであると私はそれでだが、私はクラス/複数のスライダのもので、この他の問題を持っている：私は、現在の値表示したいとき ONEスライダーの場合、それはクラスなので、.slider-valueスパンすべてを変更します。私はこの問題のどこから始めるべきかわからない。

があなたの時間/協力いただきありがとうございます:)

Answer 1

をさて、あなたは正しい道の上にあったが、あなたはおそらく何かをしようとし、それらを削除し忘れから、冗長だったそこにいくつかのことを投げました。

再利用可能な機能を実現するためにコードを少し修正しました。私はまた、スライダと同じdiv内の値フィールドをネストしました。これはjQueryが関連する要素を見つけるのがいかに簡単かを示していますが、それらを入れ子にすることなく他の方法で関連付けることができます。私はCSSを修正していないので、ちょっと混乱します。あなたは（他の人がありますが）ID属性の使用、jQueryのセレクタを使用して、あなたが使用できる3つの主な種類があったが、本当に

に...大きな変化を自分でそれを把握することができ、CSSですクラスセレクタ$(".slider"),要素セレクタ$("div")およびidセレクタ$("#slider1")。

のJavaScript/jQueryの：

ただ、HTMLとJavaScriptを次のように変更してみてください

var func = function(div) { 
    var slide = $(div).slider({ 
     range: "min", 
     slide: function(event, ui) { 
       $(div).find(".slider-value").html(ui.value); 
      }, 
     min: parseInt(div.attr("slider-min")), 
     max: parseInt(div.attr("slider-max")), 
     value: parseInt(div.attr("svalue")), 
    }) 
}; 

func($("#slider1")); 
func($("#slider2")); 
func($("#slider3")); 

HTML：

<div class="slider" id="slider1" slider-min="15" slider-max="250" svalue="132"><span class="slider-value"></span> 
</div> 


<div class="slider" id="slider2" slider-min="30" slider-max="300" svalue="165"><span class="slider-value"></span></div> 


<div class="slider" id="slider3" slider-min="100" slider-max="500" svalue="300"><span class="slider-value"></span></div>