从每个滑块获取价值jquery UI

Question

我有一些JQuery UI滑块具有不同的数据ID。 怎样才能检测到谁被选中，并在一个范围内返回滑块值？

<div id="slider" class="mystyle" data-id="1"></div> <span id="1"></span> 
<div id="slider" class="mystyle" data-id="2"></div> <span id="2"></span> 
<div id="slider" class="mystyle" data-id="3"></div> <span id="3"></span> 
<div id="slider" class="mystyle" data-id="4"></div> <span id="4"></span> 

我想这一个，但没有运气：

<script> 
$(function() { 
    $("#slider").slider({ 
     range: "max", 
     min: 0, 
     max: 5, 
     create: function() { 
      $(this).slider("option", "value", $(this).next().val()); 
     }, 
     slide: function (event, ui) { 
      //get the id of this slider 
      var id = $(this).attr("data-id") 
      //select the input box that has the same id as the slider within it and set it's value to the current slider value. 
      $("span[class*=" + id + "]").text(ui.value); 
      $("input[class*=" + id + "]").val(ui.value); 
     } 
    }); 
}); 
</script> 

我生成滑块dynamicaly：

<script> 
$(document).ready(function() { 
$("#adding").click(function() { 

var intId = $("#buildyourform div").length + 1; 
var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>"); 
var fName = $("<input type=\"text\" class=\"fieldname\" value=\"Enter your Facebook fan page url\" />"); 
var fType = $("<div id='slider' data-id='"+intId+"' style='width:250px; float:left; margin-left:10px;'></div>").slider(); 
var fLikes= $("<div class=\"fieldname\" id='"+ intId +"' style='width: 60px; height: 24px; float: left; margin-left: 13px; margin-top: 7px; border: 1px solid #999; color: rgb(243, 20, 145); text-align: center; font-family: serif;' />"); 
var fCost = $("<div class=\"fieldname\" id=\"fcost" + intId + "\" style='width: 60px; height: 24px; float: left; margin-left: 6px; margin-top: 7px; border: 1px solid #999; color: rgb(243, 20, 145); text-align: center; font-family: serif;' />"); 
var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />"); 
removeButton.click(function() { 
$(this).parent().remove(); 
}); 
fieldWrapper.append(fName); 
fieldWrapper.append(fType); 
fieldWrapper.append(removeButton); 
fieldWrapper.append(fLikes); 
fieldWrapper.append(fCost); 
$("#buildyourform").append(fieldWrapper); 
}); 
}); 
</script> 

Answer 1

我敢肯定，你应该使用一个唯一的ID为每一个元素在你的页面上......向你的类中添加“滑块”可能会更好：class="slider mystyle"。

此外，该行var id = $(this).attr("data-id")最后应该有一个;。
而且，ID不能以数字开头，所以span-ID无效。

如果给每一个滑块一个唯一的ID slider1，slider2，等，你可以只使用数量由ID：

HTML

<div id="slider1" class="slider mystyle" data-id="1"></div> <span id="slider1span"></span> 
<div id="slider2" class="slider mystyle" data-id="2"></div> <span id="slider2span"></span> 
<div id="slider3" class="slider mystyle" data-id="3"></div> <span id="slider3span"></span> 
<div id="slider4" class="slider mystyle" data-id="4"></div> <span id="slider4span"></span> 

（也许你甚至不需要现在的data-id，但这是你要找出的）

jQuery的

$(function() { 
    $(".slider").slider({ 
     range: "max", 
     min: 0, 
     max: 5, 
     create: function() { 
      $(this).slider("option", "value", $(this).next().val()); 
     }, 
     slide: function (event, ui) { 
      //get the id of this slider 
      var id = $(this).attr("id").substr('slider'.length); 
      //select the input box that has the same id as the slider within it and set it's value to the current slider value. 
      $("slider"+id+"span").html(ui.value); 
      $("input[class*=" + id + "]").val(ui.value); 
     } 
    }); 
}); 

于是，我改变了你的HTML，并在你的jQuery我改变了这个：
var id = $(this).attr("id").substr('slider'.length);
这：
$("slider"+id+"span").html(ui.value);（也改变了的.text到.html）

顺便说一句，我不确定，但我从来没有见过这个$("input[class*=" + id + "]").val(ui.value);之前，所以我不会相信这个作品（但你可能知道我不这样做）。

---

如果仍然不行，则可能是因为$(this)并不是指实际的对象。在这种情况下，尝试使用ui（http://api.jqueryui.com/slider/#event-slide）来引用该对象。

---

如果不同的滑块似乎没有作出适当的反应，似乎所有的反应偏袒第一或第一反应总是更改任何滑块，然后那是因为这行：$(".slider").slider({。 在这种情况下，把它放在一个for循环，并附加事件的每一个滑块由ID：

$(function() { 
    for (var i=1; i<=4; i++) { 
    $("#slider"+i).slider({ 
     //rest of the code 
    }); 
    } 
});