更新基于文本输入值显示的div数

时间:2013-03-12 11:16:24

标签: javascript jquery html filter

我认为我正朝着正确的方向前进,我似乎错过了一些简单的事情

我正在使用jquery knob插件来更新输入字段

$('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>

我附上了我正在处理demo

的演示的链接

谢谢,

1 个答案:

答案 0 :(得分:1)

将淡入淡出切换更改为:

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

这就是隐藏低于值的那些并显示高于它的那些。你很接近,但是淡入淡出的切换是隐藏/显示你不想要的。

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