Question

我有一些具有不同data-id的Jquery UI滑块。如何检测选定对象并在其旁边的下一个div中返回滑块值？我生成滑块和动态的其他元素：

检查我的jsfiddle：http://jsfiddle.net/Yg85V/5/

$(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=\"slider" + intId + "\" style='width:250px; float:left; margin-left:10px;'></div>").slider();
var fLikes= $("<span class=\"slider" + 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);
});
});

在体内：

<fieldset id="buildyourform">
<legend>Welcome! <span style="color:#F00; margin-left:13px;">My products</span></legend>
</fieldset>

Answer 1

您可以使用jQuery UI Slider change事件获取滑块的值，如下所示：

 $("someSelector").slider({
       change:function(event, ui) { 

             }

并使用ui.value获取当前滑块值

然后使用文档遍历将值设置为下一个span和div，如上所述：

var fType = $("<div id=\"slider\" data-id=\"slider" + intId + "\" style='width:250px; float:left; margin-left:10px;'></div>").slider({
      change:function(event, ui) { 
            //Find next span and div to the current selected slider div
            $(this).nextAll("span:first").html(ui.value);
            $(this).parent().find("div.fieldname").html(ui.value);
            }
    });

希望这有帮助。

这是更新的JSFIDDLE

当我动态生成时，Jquery UI Slider无法获取该值

1 个答案: