Question

我想按顺序显示动态复选框（从1到30），但它们以相反的顺序显示（从30到1），当滑块达到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);
}

它们是根据滑块值显示/隐藏的，但我不确定这是否是问题。

这是他们追加的地方：

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

希望这有帮助。

Answer 2

您需要将N-ui.value更改为ui.value - 1。无需添加任何额外的过滤器

$("#showChck div").show().filter(":lt(" + (ui.value - 1) + ")").hide();

并将ui.value == 1更改为ui.value < 1

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

Fiddle1

修改滑块为1时仅显示一个框，滑块为30时显示30。

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

将:lt替换为:gt

Fiddle2

按顺序显示动态复选框

2 个答案: