javascript - 当显示最后一个孩子时，如何让点击功能停止工作？

Question

这是 html，pages-nr 有一个固定的宽度，带有一个 overflow:hidden ：

<div class="pages-scroll">
    <div class="pages-rightarrow"></div>
    <div class="articles-pages">
       <div class="pages-nr">
            <a href="javascript:void(0)">1</a>                          
            <a href="javascript:void(0)">2</a>
            <a href="javascript:void(0)">3</a>
            <a href="javascript:void(0)">4</a>
            <a href="javascript:void(0)">5</a>
            <a href="javascript:void(0)">6</a>
            <a href="javascript:void(0)">7</a>
            <a href="javascript:void(0)">8</a>
       </div>
     </div> 
     <div class="pages-leftarrow"></div>
</div>

这是我到目前为止写的脚本，我不知道要问什么“如果”这样做，当我到达最后一个 div 或第一个 div 时，箭头将被隐藏。

$('.pages-leftarrow').click(function () {
    if ( $('.pages-nr a').hasClass('????') ) {
        $('.pages-rightarrow').hide();
    }
    else {
        $('.pages-nr').css({"margin-left": function(index, value) {
            return parseFloat(value) - 44}
        });
    }
});

Answer 1

这是 jsFiddle： http: //jsfiddle.net/Na3W7/4/ 这是启动时运行的代码的核心：

$('.pages-nr a:not(:first),.pages-leftarrow').hide();
$('.pages-rightarrow').click(function(e){
    e.preventDefault();
    var $nextPage = $('.pages-nr a:visible:first').hide().next().show();
    if($nextPage.is('.pages-nr a:last-child')){
        $(e.target).hide();
    }
    if($('.pages-nr a:first').is(':visible')) {
        $('.pages-leftarrow').hide();
    }
    else {
        $('.pages-leftarrow').show();
    }

});
$('.pages-leftarrow').click(function(e){
    e.preventDefault();
    var $prevPage = $('.pages-nr a:visible:first').hide().prev().show();
    if($prevPage.is('.pages-nr a:first-child')){
        $(e.target).hide();
    }
    if($('.pages-nr a:last').is(':visible')) {
        $('.pages-rightarrow').hide();
    }
    else {
        $('.pages-rightarrow').show();
    }

});