Question

我需要在同一页面中使用几个滑块。因此，我为滑块创建了一个类（因此只有一个jquery代码），我想将div的 max和min值设置为属性。然后它们将根据所选的滑块进行更改。

我猜这样做，我需要在某个时候使用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，所以它是＆＃39; sa有点搞砸了，但你可以自己搞清楚......

真正的重大改变是使用 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>

JQuery UI滑块：使用属性设置min和max

1 个答案: