javascript - 获取 jQuery slider 的值

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);  
});

单击第一个按钮时，我想要单独的值..但我正在获取两个 slider 的值。 http://jsfiddle.net/5TTm4/1906/

Answer 1

$(".slider-value") 返回这两个字段。使用精炼器来获得特定的精炼器。

示例:

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

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

动态解决方案

在创建 slider 时，只需动态创建按钮及其单击事件(或附加到内联按钮)即可。

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);
});

<强> Demo