根據文本輸入值更新顯示的div數

Question

我認為我朝着正確的方向前進，但我似乎缺少了一些簡單的東西

我正在使用jquery旋鈕插件來更新輸入字段

$('document').ready(function() {

    $(".knob").knob({
                    change : function (value) {
                        //console.log("change : " + value);
                    },
                    release : function (value) {
                        //console.log(this.$.attr('value'));
                        console.log("release : " + value);

                        var num = parseInt($("#sitesinput").val());
                        var total = $(".one").length;
                        alert(num + ' ' + total);

                              $(".one").slice(1,value).fadeToggle();


                    },
                    cancel : function () {
                        console.log("cancel : ", this);
                    }
                });

});

<div class="item box one">1</div>
<div class="item box one">2</div>
<div class="item box one">3</div>
<div class="item box one">4</div>
<div class="item box two"></div>
<div class="item box two"></div>
<div class="item box two"></div>
<div class="item box two"></div>
<div class="item box three"></div>
<div class="item box three"></div>
<div class="item box three"></div>
<div class="item box three"></div>

我附上一個鏈接，我一直在演示演示

謝謝，

Answer 1

更改淡入淡出切換為此：

$('.one').slice(0,value).fadeOut();
$('.one').slice(value).fadeIn();

也就是說，隱藏低於該值的值，並顯示高於該值的值。 您已經接近，但是淡入淡出開關隱藏/顯示了您不想要的內容。

JSFiddle： http : //jsfiddle.net/HYt4Z/6/