Question

我正在编写一个JQuery移动应用程序。在这个应用程序中，我需要动态构建一个滑块列表。每当我构建我的列表时，只会呈现传统的HTML样式下拉列表。我希望渲染JQuery移动滑块。为了动态构建这个列表，我写了以下内容：

  $.each(result.Results, function (i, r) {
    var s = "<li><div data-role='fieldcontain'><label for='person" + i + "'>" + r.FullName + "</label>";
    s += "<select name='person" + i + "' id='person" + i + "' data-role='slider'>";
    s += "<option value='false' selected='selected'>No</option><option value='true'>Yes</option>";
    s += "</select></div></li>";

    $("#personList").append(s);
  });
  $("#personList").listview("refresh");

  var sliders = $("#personList [data-role=slider]");
  for (var i = 0; i < sliders.length; i++) {
    sliders[i].slider();
  }

执行代码时，我收到一条JavaScript错误：

未捕获的TypeError：对象＃没有方法'slider'

如果我不使用“sliders [i] .slider（）;”代码，仍然呈现传统的HTML下拉列表而不是JQuery Mobile滑块。有人可以帮助确定我做错了吗？

谢谢！

Answer 1

我认为你需要在for循环中使用时创建一个新的JQuery对象......

  var sliders = $("#personList [data-role=slider]");
  for (var i = 0; i < sliders.length; i++) {
    $(sliders[i]).slider();
  }

See this post for more info（更具体地来说是来自SLaks的答案）

当然，无论如何你都可以完全不使用循环......

$("#personList [data-role=slider]").slider();

Answer 2

实际上，您不需要for循环语句。您可以使用此语句在所有滑块上调用slider()方法;

$("#personList [data-role=slider]").slider();

JQuery Mobile Slider无法正常呈现

2 个答案: