Question

我对这段代码有一些问题，我被要求继续工作。

function rebuildPager( to_show ){

var item_per_page = 10;
var items = $('#video-container .span3.'+to_show);
var pager = $('#navigation-container .nav-video');

pager.html('');

if(items.length > item_per_page){

    var total_page = Math.ceil( items.length / item_per_page );
    var el_page = 1;
    //console.log(total_page);
    items.each(function(index, element) {

        if( index!=0 && ( (index) % (item_per_page) == 0 ) ) { el_page++; }
        $(element).attr('data-item_page' , el_page );

    }).promise().done(function() {

        //add prev link
        pager.append('<li><a href="javascript:void(0);" onclick="showThisPage(\'prev_page\')" class="prev_page" data-show_page="prev_page"><</a></li>');

        //add pages links
        for( i=1; i<=total_page; i++) {
            pager.append('<li><a href="javascript:void(0);" onclick="showThisPage(\''+i+'\')" class="numerate_page" data-show_page="'+i+'">'+i+'</a></li>');
        }

        //add next link
        pager.append('<li><a href="javascript:void(0);" onclick="showThisPage(\'next_page\')" class="next_page" data-show_page="next_page">></a></li>');

        $('#video-container').attr('data-current_page' , 1);
        $('#video-container').attr('data-total_pages' , total_page);
        $('#video-container').attr('data-current_showing' , to_show);
        $('#video-container .span3.'+to_show+'[data-item_page="1"]').fadeIn(400);
    });


} else {
    items.fadeIn(700);
}
}

然后是改变页面状态的功能

function showThisPage(show_page) {

var current_page = $('#video-container').attr('data-current_page');
var to_show = $('#video-container').attr('data-current_showing');
var total_pages = $('#video-container').attr('data-total_pages');
var page_to_show = "";

if( show_page == current_page) { return; }

if( show_page == 'next_page' ){ page_to_show = parseInt(current_page)+1 ; }
else if( show_page == 'prev_page'){ page_to_show = parseInt(current_page)-1 ; }
else { page_to_show = show_page; }

if( page_to_show < 1 || page_to_show > total_pages ) {
    return;
} else {

    $('#video-container .span3').fadeOut( 700 ).promise().done(function() {

        $('#video-container .span3.'+to_show+'[data-item_page="'+page_to_show+'"]').fadeIn( 700 ).promise().done(function() {

            $('#video-container').attr('data-current_page' , page_to_show);

        });

    });

}

$.scrollTo( $('#select-content'), 800 , {
    axis: 'y',
});

}

我想在加载的第一页上添加一个“当前页面”类，并在单击另一个页面链接时更改它。我试图添加以下javascript但它不会删除该类。所有点击的页面都保持“当前页面”类。

$(".nav-video li a").click(function(event) {
    $(this).addClass("current-page").siblings().removeClass("current-page");
});

真诚地感谢帮助。

提前致谢。

Answer 1

$(".nav-video li a").click(function(event) {
    $(this).addClass("current-page").siblings().removeClass("current-page");
});

在该代码中，$（this）引用用户点击的A标记。尝试使用$（this）.closest（'。page'）...

Answer 2

使用此代码，当单击链接时，它将获得“当前页面”类（很棒），但此元素没有兄弟（它在“li”标记中是单独的）。我假设你有一个像

这样的寻呼机

<ul>
    <li><a ...>...</a></li>
    <li><a ...>...</a></li>
    <li><a class="current-class" ...>...</a></li>
    <li><a ...>...</a></li>
    ...
</ul>

...并且您希望跟踪点击的“a”标记，其上包含“当前页面”类。所以你需要做的更像是

$(".nav-video li a").click(function(event) {
    // remove the current class on the previously clicked <a> tag
    $(".nav-video li a.current-class").removeClass("current-class");
    // add the current-class to the clicked <a> tag
    $(this).addClass("current-page");
});

应该这样做。

分页上的addclass removeclass

2 个答案: