【问题标题】:Remove inactive class items删除不活动的课程项目
【发布时间】:2012-04-22 01:28:33
【问题描述】:

我正在尝试制作一个pagination,如下所示,方法是上传图像并将它们添加到容器中,方法是使用新的id's 创建新的div 并将class 作为第一页的current

如果我更改到新页面,我会将活动类删除到当前页面并将其添加到所选页面。

我想知道如何删除所有没有“当前”类的 inactive 页面

这是我的代码:

<script type="text/javascript">
var imagesPerPage = 4, pageNumber = 1;

function onAjaxSucceded(data) {
    var pagesContainer = $('#pagesContainer'),
        imagesInPage = 0,
        divPage = $("#p1");

    $.each(data.result, function(index, file) {
        if (imagesInPage >= imagesPerPage) {
            imagesInPage = 1;
            pageNumber += 1;
            divPage = $('<div/>', {id : "p" + pageNumber}).addClass('pagedemo').hide().appendTo(pagesContainer);
        } else {
            imagesInPage += 1;
        }
        var src = 'Uploads/' + file.name;
        $('<img>', {src: src, href: src, "class": 'LoadclickImage', align: 'left'}).appendTo(divPage);
    });

    $("#demo5").paginate({
        count: pageNumber,
        start: 1,
        display: Math.min(7, pageNumber),
        border: true,
        border_color: '#fff',
        text_color: '#fff',
        background_color: 'black',
        border_hover_color: '#ccc',
        text_hover_color: '#000',
        background_hover_color: '#fff',
        images: false,
        mouse: 'press',
        onChange: function(page) {
            $('#paginationdemo ._current').removeClass('_current').hide();
            $('#p' + page).addClass('_current').show();
        }
    });
}

var fakeAjaxData = {
    result: [
        {name: '../../../img/keys.png'},
        {name: '../../../img/logo.png'},
        {name: '../../../img/input-button-bg.png'},
        {name: '../../../img/remove-resources.png'},
        {name: '../../../img/logo.png'},
        {name: '../../../img/input-button-bg.png'},
        {name: '../../../img/remove-resources.png'},
        {name: '../../../img/keys.png'},
        {name: '../../../img/keys.png'},
        {name: '../../../img/input-button-bg.png'},
        {name: '../../../img/logo.png'},
        {name: '../../../img/remove-resources.png'},
        {name: '../../../img/keys.png'},
        {name: '../../../img/keys.png'},
        {name: '../../../img/input-button-bg.png'},
        {name: '../../../img/logo.png'},
        {name: '../../../img/remove-resources.png'},
        {name: '../../../img/input-button-bg.png'},
        {name: '../../../img/logo.png'},
    ]
};

$(function() {
    onAjaxSucceded(fakeAjaxData);
});
</script>

这是我的demo

编辑

除了removing inactive 类,谁能告诉我如何删除所有页面,如果我再次添加,我现在需要从1st page. 添加图像如果我从它添加的最后一页。

如果我的标签有误,请见谅。

【问题讨论】:

    标签: jquery ajax class pagination


    【解决方案1】:

    类似这样的:

    $("#pagesContainer > :not(._current)").remove()
    

    【讨论】:

    • @mikez-首先感谢您的回复。它仍然不会删除页面。
    • 我不知道该怎么办。我对分页插件不熟悉。
    • +1 此代码执行@DotNetter 的要求。我在 OP 的演示中看到的唯一问题是他在所有 DOM 加载之前将点击事件附加到外部,因此删除按钮在点击时什么也不做。查看更新的演示:jsfiddle.net/gbzsR/30
    • @Protron-在小提琴中,即使它在 DOM 中,它也不会做任何事情。
    • @DotNetter 我刚刚再次测试,如果我单击它,然后转到任何其他页面,则不再显示其他页面。因为其余页面的整个 div 及其各自的图像不再是页面的一部分。但也许那不是你想要的(但我仍然不知道你真正想要的是什么)。
    猜你喜欢
    • 2020-06-22
    • 2011-02-15
    • 2018-10-30
    • 2017-09-28
    • 2015-02-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多