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")正在返回这两个字段。使用Refiners获取特定的。

示例：

$(".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);
});

<强> Demo

Answer 2

您需要一种方法来识别您想要拍摄的滑块值，目前无法对其进行硬编码：.prev().prev().find(...blabla)，这是一种不好的方式，因为您的结构可能会发生变化。

我更新了您的jsfiddle以使其工作，并举例说明如何使用数据属性和ID轻松完成此操作：http://jsfiddle.net/5TTm4/1908/

你基本上给按钮一个选择器，它是什么元素＆＃39;绑定＆＃39;致：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);
        }
    });
});

获得jQuery滑块的价值

2 个答案:

动态解决方案