Question

我使用特定的JavaScript文档，只允许我在一个HTML文档（https://github.com/icodebuster/transition.js）中的不同页面之间轻松切换。

这是我的HTML：

<div class="pt-wrapper">
<div class="pt-trigger-container">
    <button class="pt-trigger pt-btn1" id="btn_bot" data-animation="3" data-goto="-1"></button>
    <button class="pt-trigger pt-btn2" data-animation="2" data-goto="-2"></button>
</div>

<!--All Pages-->

<div class="head_wrapper">
    <div class="logo"></div>
    <div class="menu"></div>
</div>

<div class="pt-page pt-page-1">
  *Page1 Code*    
</div>
<div class="pt-page pt-page-2">
  *Page2 Code*              
</div>
<div class="pt-page pt-page-3">
  *Page3 Code*    
</div>  ETC...

我想修改我的jQuery代码，以便在我在特定页面时显示和消失某些按钮。例如，在这里，当我点击我的第一个pt-trigger按钮时，它会切换到下一页（data-goto =“ - 1”相对于下一页，-2为前一页切换）。 jQuery代码在浏览器中显示的当前页面中添加了“pt-page-current”类。

以下是与此系统相关的jQuery：

// This will get the pt-trigger elements parent wrapper div
    var $pageWrapper = $pageTrigger.closest('.pt-wrapper');
    var currentPageIndex = $pageWrapper.data('current'), tempPageIndex,
        $pages = $pageWrapper.children('div.pt-page'),
        pagesCount = $pages.length,
        endCurrentPage = false,
        endNextPage = false;

    gotoPage = parseInt($pageTrigger.data('goto'));

    // check if 'data-goto' value is greater than total pages inside 'pt-wrapper'
    if (!(pagesCount < gotoPage)) {

        tempPageIndex = currentPageIndex;

        if($pageWrapper.data('isAnimating')) {
            return false;
        }

        // Setting the isAnimating property to true.
        $pageWrapper.data('isAnimating', true);

        // Current page to be removed.
        var $currentPage = $pages.eq(currentPageIndex);

        // Checking gotoPage value and decide what to do
        // -1 Go to next page
        // -2 Go to previous page
        // 0+ Go to custom page number.
        // NEXT PAGE
        if (gotoPage == -1) {

            // Incrementing page counter to diplay next page
            if(currentPageIndex < pagesCount - 1) {
                ++currentPageIndex;
            }
            else {
                currentPageIndex = 0;
            }
        }
        // PREVOUS PAGE
        else if (gotoPage == -2) {
            if (currentPageIndex == 0){
                currentPageIndex = pagesCount - 1;

            }
            else if(currentPageIndex <= pagesCount - 1 ) {
                --currentPageIndex;
            }
            else {
                currentPageIndex = 0;
            }

        }
        // GOTO PAGE
        else {
            currentPageIndex = gotoPage - 1 ;
        }

        // Check if the current page is same as the next page then do not do the animation
        // else reset the 'isAnimatiing' flag
        if (tempPageIndex != currentPageIndex) {
            $pageWrapper.data('current', currentPageIndex);

            // Next page to be animated.
            var $nextPage = $pages.eq(currentPageIndex).addClass('pt-page-current');

            $currentPage.addClass(outClass).on(animEndEventName, function() {
                $currentPage.off(animEndEventName);
                endCurrentPage = true;
                if(endNextPage) {
                    onEndAnimation($pageWrapper, $nextPage, $currentPage);
                }
            });

            $nextPage.addClass(inClass).on(animEndEventName, function() {
                $nextPage.off(animEndEventName);
                endNextPage = true;
                if(endCurrentPage) {
                    onEndAnimation($pageWrapper, $nextPage, $currentPage);
                }
            });

        }
        else {
            $pageWrapper.data('isAnimating', false);
        }

    }
    else {
        alert("Transition.js : Invalid 'data-goto' attribute configuration.");
    }

    // Check if the animation is supported by browser and reset the pages.
    if(!support) {
        onEndAnimation($currentPage, $nextPage);
    }

}

function onEndAnimation($pageWrapper, $nextPage, $currentPage) {
    resetPage($nextPage, $currentPage);
    $pageWrapper.data('isAnimating', false);
}

function resetPage($nextPage, $currentPage) {
    $currentPage.attr('class', $currentPage.data('originalClassList'));
    $nextPage.attr('class', $nextPage.data('originalClassList') + ' pt-page-current');
}

return {
    init : init,
};

})();

$(document).ready(function() {
    // initializing page transition.
    PageTransitions.init();
});

我尝试将此函数添加到代码中，但它不起作用：

$(document).ready(function() {
if(currentPageIndex >= 3){
    $("#btn_bot").addClass(".btn_hide");
}

我尝试通过添加仅包含btn_hide CSS属性的类display: none;来使相对于下一页的底部按钮消失，但仅当我在第3页或更多时。 / p>

Answer 1

你可以将你的if移动到一个函数中并添加一个onclick来检查当前页面，除了调用document.ready上的函数。

$(document).ready(function() {
    checkPage()
};
$(document).on('click',function(){
    checkPage()
});

function checkPage(){
    if(currentPageIndex >= 3){
    $("#btn_bot").addClass("btn_hide");
  }
}

Answer 2

我建议使用show（）和hide（）函数，并在按钮上添加onclick（）事件

<div class="pt-trigger-container">
    <button onclick="gotoPage(this)" class="pt-trigger pt-btn1" id="btn_bot" data-animation="3" data-goto="-1"></button>
    <button onclick="gotoPage(this)" class="pt-trigger pt-btn2" data-animation="2" data-goto="-2"></button>
</div>

在这个函数里面写这样的东西：

<script>
    $(document).ready(function() {
        function gotoPage(checkedButton){
            var pageIndex = $(checkedButton).data('goto');
            // TODO: paste your currentPageIndex calculation here
            if (currentPageIndex >= 3) {
                $("#btn_bot").show();
            }
            else { 
                $("#btn_bot").hide();
            }
        }

        $(document).keypress(function (e) {
            if (e.keyCode == '38') {
                // up arrow
            }
            else if (e.keyCode == '40') {
                // down arrow
            }
            else if (e.keyCode == '37') {
                // left arrow
                $('.pt-btn1').click();
            }
            else if (e.keyCode == '39') {
                // right arrow
                $('.pt-btn2').click();
            }

        });
    });
</script>

使div消失或添加display：none;用jQuery

2 个答案: