javascript - 按顺序显示动态复选框

Question

我想按顺序(从 1 到 30)显示动态复选框，但它们以相反的顺序出现(从 30 到 1)，而且当 slider 到达 30 时数字 1 不显示:

for (var i = 1; i <= N; i++) {
    var $input = $('<input/>', {
      type: "checkbox",
      id: "checkbox-" + i
    });
    var $label = $('<label/>', {
      id: "label-" + i,
      for: "checkbox-" + i
    }).append(i);
    var $container = $('<div/>', {
      id: "chckContainer-" + i
    }).append($input).append($label);

    $("#showChck").append($container);
}

它们根据 slider 值显示/隐藏，但我不确定这是否是问题所在。

这是它们附加到的地方:

<div data-role="fieldcontain" id="channels" style="display:none;">
    <fieldset id="showChck" data-role="controlgroup" data-type="horizontal">

    </fieldset>
</div>

http://jsfiddle.net/6vkyh4kL/5/

Answer 1

据我所知有几个变化，以及 :gt还添加 :eq

$("#showChck div").show().filter(":eq("+ui.value+"), :gt(" + (ui.value) + ")").hide();

从 ui.value == 1 更改条件至 < 1

if (ui.value < 1) { 
  $("#show_channels").hide();
  $("#label-1").hide();
} else {
  $("#show_channels").show();
}

这是更新后的演示 http://jsfiddle.net/dhirajbodicherla/6vkyh4kL/10/

希望这对您有所帮助。