javascript - 使用 jQuery 显示更多/更少的项目

标签 javascript jquery jquery-ui jquery-plugins usability

我有一组元素,但我不想一次显示全部元素。 我的问题是我必须在同一页面中多次使用它。 你们知道 jQuery 插件可以实现我写的功能吗?

jQuery(function($) {
    $lis = $('.addfilter'); 
    min = 2;
    max = $lis.length;
    var visible = min;

    function showUpToIndex(index) {
        $lis.hide();
        $lis.slice(0, index).show();
    }

    function disableButtons(){
        if (visible >= max){
            visible = max;
            $('#more').hide();
        }
        else
        {
            $('#more').show();
        }
        if (visible <= min){
            visible = min;
            $('#less').hide();
        }
        else
        {
            $('#less').show();
        }
    }

    showUpToIndex(visible);
    disableButtons();

    $('#more').click(function(e) {
        e.preventDefault();
        visible = visible + 5;
        disableButtons();  
        showUpToIndex(visible);
    });

    $('#less').click(function(e) {
        e.preventDefault();
        visible = visible - 5;
        disableButtons();     
        showUpToIndex(visible);
    });
});

这是一个工作示例: http://jsfiddle.net/cUUfS/179/

谢谢!

最佳答案

关于javascript - 使用 jQuery 显示更多/更少的项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18479105/

相关文章:

javascript - 如何将当前实体 ID 传递到我的 Silverlight Web 资源?

javascript - 选择非空选项后默认选项消失

c# - 如何检查 mvc3 中当前处于事件状态的部分?

php - 在 Woocommerce 中显示或隐藏两个结账字段

javascript - 如何在 Internet Explorer 8 中使用 new Image()?

javascript - DOM 是否使用 jQuery 立即刷新?

javascript - 如何使用下拉选项隐藏和显示按钮?

javascript - 自动完成仅在页面加载或输入一个字母时运行一次,但仅运行一次

php - 使用 javascript 或 jquery 更改值..有可能吗?

javascript - 添加自定义 header 到 pickadate