從每個滑塊獲取價值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 
    }); 
    } 
});