Question

我是一名设计师，除了HTML / CSS之外，我不熟练编写任何代码。我几乎不懂Javascript，但我通常可以通过Franken-copypasta获得简单动画和基本功能的成功jQuery脚本。在这种情况下，我在某个地方被绊倒，我不知道在哪里。

该脚本仅用于在单击“#showNav”按钮时将“＃left-sidebar”元素的“left”属性切换为0到-250px之间。

$(document).ready(function(){
var navPos = $('#left-sidebar').position().left;
$('#showNav').click(function(){
    if(navPos = -250){
        $('#left-sidebar').animate({
            left: '0px'
        }, 500);
    } else {
        $('#left-sidebar').animate({
            left: '-250px'
        }, 500);
    }
});
});

我想我可以写一个if / then语句来检查元素是否已经在-250，并相应地切换到相反的值。目前，单击该按钮会使＃左侧边栏从-250变为0，但是当我再次单击该按钮时，它不会按预期返回到-250。我想这是一个非常简单的修复，但我甚至不知道从哪里开始...

Answer 1

将var navPos = $('#left-sidebar').position().left;移到点击处理程序中，它会起作用。

目前，您只分配navPos一次。因此，navPos始终保持初始值，无论您点击的频率如何。

所以你需要的是用户点击#showNav div时的位置。

这是完整的更新代码：

$(document).ready(function(){
  $('#showNav').click(function(){
    var navPos = $('#left-sidebar').position().left; 

    if(navPos == -250){
      $('#left-sidebar').animate({left: '0px'}, 500);
    } else {
      $('#left-sidebar').animate({left: '-250px'}, 500);
    }
  });
});

Answer 2

<强> CODE DEMO

$(function(){ // a bit shorter DOM ready

    $('#showNav').click(function(){
        var navPos = $('#left-sidebar').position().left;       
        $('#left-sidebar').stop().animate({left: navPos===-250 ? 0 : -250}, 500);
    });

});

检索位置并
使用简单的三元运算符，只需说：

is navPos === -250            ?
if YES (animate left to 0   ) :
if NO  (animate left to -250) ;

遇到简单的if / then语句问题

2 个答案: