Question

我有一些具有不同data-id的Jquery UI滑块。如何检测选定对象并在其旁边的范围内返回滑块值？

<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>

我正在动态生成滑块：

<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 ..最好在你的课程中添加'slider'：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 }); } });

从每个Slider Jquery UI获取价值

1 个答案: