使div消失或添加显示：无；使用jQuery

我使用一个特定的JavaScript文档，它允许我在一个HTML文档（）中的不同页面之间轻松切换

这是我的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...

---

我在这里试图通过添加类

btn_hide

使相对于下一页的底部按钮消失，该类只包含一个

显示：none

CSS属性，但仅当我在第3页或更多页时。

除了调用document.ready上的函数外，您还可以将if移到函数中并添加onclick以检查当前页面

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

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

---

我建议使用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>

$（文档）.ready（函数（）{
功能转到页面（选中按钮）{
var pageIndex=$（checkedButton）.data（'goto'）；
//TODO:将当前页面索引计算粘贴到此处
如果（currentPageIndex>=3）{
$（“#btn_bot”）.show（）；
}
否则{
$（“#btn_bot”）.hide（）；
}
}
$（文档）。按键（功能（e）{
如果（e.keyCode=='38'）{
//向上箭头
}
否则如果（e.keyCode=='40'）{
//向下箭头
}
否则如果（e.keyCode=='37'）{
//左箭头
$（'.pt-btn1'）。单击（）；
}
否则如果（e.keyCode=='39'）{
//右箭头
$（'.pt-btn2'）。单击（）；
}
});
});

因此，当文档第一次准备好时，将调用此If语句一次。您需要在任何时候调用该函数，而不是在页面加载时只调用一次，以便不断检查页面的状态+1脱离主题，但是您是否考虑过在该项目中使用类似于Knockout/Angular/Backbone的功能？看起来这将是一个非常好的用例。jQuery在这种情况下有点棘手。嘿，也许不是问题，但是你确定“.btn\u hide”吗？这个在Css中用于表示您指定了一个类，但在javascript中addClass上不是必需的。试试addClass（“btn_hide”）@mcclaskiem，我确实没想过亚历克斯，我是个设计师，所以我没有足够的时间学习其他人的语言。。。我使用jQuery中的codrops中的外部代码，所以…：你说得对！这是一个错误，因为我在jsHi中没有经验，感谢您的回答，使用此解决方案，我可以添加滚动和箭头导航，还是仅用于按钮单击转换？箭头导航？我不确定我是否正确理解你。我说的对吗？您想使用键盘按钮左箭头和右箭头添加导航吗？或者你只想把带有箭头的图片添加到带有类的按钮上。pt-btn1和。pt-btn2？我的意思是使用键盘按钮是的（四个方向）！你当然能做到！在脚本中看到我的更新You rocks Tequila，我将尝试用我的noob技能来实现这一点，呵呵

<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>