показать динамические флажки в порядке

Question

Я хочу показать динамические флажки в порядке (от 1 до 30), но они отображаются в обратном порядке (от 30 до 1), а также номер 1 не отображается, когда ползунок достигает 30:

Они отображаются/скрыты по значению ползунка, но я не уверен, что это проблема.

Это где они присоединять к:

<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

EDIT: Чтобы отобразить только одну коробку, когда ползунок находится в одном, и дисплей 30, когда ползунок равен 30.

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

заменить :lt с :gt

Fiddle2