javascript - 根据文本输入值更新显示的 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/