獲取jQuery滑塊的價值

Question

html

<h1>HTML Slider Test</h1>
<div class="slider" data-max="100"></div>
<p>Your slider has a value of <span class="slider-value"></span></p>
<input type="button" value="send" class="send">
<div class="slider" data-max="400"></div>
<p>Your slider has a value of <span class="slider-value"></span></p>
<input type="button" value="send" class="send">

jQuery的

var a = 0;

$(".slider").each(function() {
    $(this).slider({
        value : 5,
        min   : 1,
        max   : $(this).data('max'),
        step  : 1,
        slide : function (event, ui) {
           a = ui.value;
           $(this).next().find('span.slider-value').html(ui.value);
        }
    });
});

$(".send").click(function () {
    var c=$(".slider-value").text();
    alert(c);  
});

在單擊第一個按鈕時，我想要單獨的值。但是我正在獲得兩個滑塊的值。 http://jsfiddle.net/5TTm4/1906/

Answer 1

$(".slider-value")返回兩個字段。 使用精煉機獲得特定的精煉機。

例：

$(".slider-value").first()
$(".slider-value").last()

http://jsfiddle.net/5TTm4/1909/

動態解決方案

創建滑塊時，只需動態創建按鈕及其單擊事件（或附加到嵌入式按鈕）。

var a = 0;
$(".slider").each(function() {
    var slider = this;
    $(slider).slider({
        value : 5,
        min   : 1,
        max   : $(this).data('max'),
        step  : 1,
        slide : function (event, ui) {
           a = ui.value;
           $(this).next().find('span.slider-value').html(ui.value);
        }
    });
    var button = $('<button>send</button>');
    $(button).click(function() {
       alert( $(slider).slider("option", "value"));
    });
    $(slider).next().find('span.slider-value').after($("<br />"), button);
});

演示版

Answer 2

您需要一種方法來標識要獲取的滑條值，而如果不對其進行硬編碼，則目前無法實現： .prev().prev().find(...blabla) ，這是一種不好的做法，因為您的結構可能會改變。

我更新了您的jsfiddle以使其正常運行，並給出了一個使用數據屬性和ID輕松實現此操作的示例： http : //jsfiddle.net/5TTm4/1908/

基本上，您可以為按鈕提供一個選擇器，以選擇“綁定”到哪個元素： data-slider="#slider-value-2"

您還為滑塊值提供了一個與選擇器匹配的ID： id="slider-value-2"

修改onClick函數：

var $this = $(this);
var c=$($this.attr('data-slider')).text();

現在，您可以靈活地檢索值並將元素綁定到按鈕，而不必依賴於dom。 我建議使用相同的技術將值元素綁定到滑塊本身。

---

當我使用它時：緩存$(this)的值，它可以更快，並且可以在擴展代碼時為您節省很多范圍問題。

$(".slider").each(function() {
    var $this = $(this);
    $this.slider({
        value : 5,
        min   : 1,
        max   : $this.data('max'),
        step  : 1,
        slide : function (event, ui) {
           a = ui.value;
           $this.next().find('span.slider-value').html(ui.value);
        }
    });
});