JQuery UI滑塊：使用屬性設置最小和最大值

Question

我需要在同一頁面中使用多個滑塊。因此，我創建了一個滑塊類（所以只有一個jQuery代碼），我想將最大值和最小值設置爲div的屬性。然後它們將根據所選的滑塊進行更改。

我猜想要做到這一點，我需要在某個時候使用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")。

剛剛嘗試了以下更改HTML和JavaScript：

的JavaScript/jQuery的：

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>