为什么这个变量在我的函数中不能正常工作？

Question

为什么这个变量在我的函数中不能正常工作？

3

变量"abtBack"包含一个if语句，当在xBttn点击函数之后运行时，应该允许屏幕上的单词"About"回到其原始位置。但出于某种原因，当我尝试运行这些变量时，与我没有尝试运行它们时没有任何不同。为了解决这个问题，我省略了代码中我认为不重要的部分。请参考下面的完整代码。
JSFiddle

<div id='bckDrp'>
  <div id='nav'>
    <img src='https://cdn2.iconfinder.com/data/icons/media-and-navigation-buttons-round/512/Button_12-128.png' id='xBttn'>
    <ul id='navLst'>
      <li class='navOp' id='hme'>Home</li>
      <li class='navOp' id='abt'>About</li>
      <li class='navOp' id='prt'>Portfolio</li>
    </ul>
  </div>
</div>

var abtBack = function() {
  if ($('#abt').offset().left == (abtLeft - 210)) {
    $(this).animate({
      left: "+=210"
    }, 450);
  } 
}

var main = function() {
  //When any tab is clicked
  $('#hme, #abt, #prt').click(function() {
    $('#xBttn').toggle(300);
    $('#xBttn').click(function() {
      $('#xBttn').fadeOut(300);
      $('#hme, #abt, #prt').animate({
        opacity: 1
      }, 300);
      abtBack();
    })
  })

  var abtLeft = $('#abt').offset().left;
  //When About tab is clicked
  $('#abt').click(function() {
    if ($('#hme, #prt').css('opacity') == 0) {
      $('#hme, #prt').animate({
        opacity: 1
      }, 300);
    } else {
      $('#hme, #prt').animate({
        opacity: 0
      }, 300);
    }
}

- Joshua

但问题是什么？ - user2182349

当我尝试运行变量时，没有任何不同的反应。 - Joshua

2

什么都没有？那么Javascript控制台中的错误Uncaught ReferenceError: abtLeft未定义呢？ - Barmar

我没有看到那个？ - Joshua

“运行变量”这个短语实际上并没有什么意义。 - Pointy

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Barmar · Accepted Answer

变量abtLeft是局部变量，属于main函数的范围，因此不能从abtBack函数中访问。可以将该变量声明移出两个函数之外，或将abtBack函数定义放在main函数中。

另一个问题是，在abtBack和prtBack函数中，this未设置为要执行动画的元素，因此$(this).animate()无法工作。请使用$('#prt').animate()和$('#abt').animate()代替。

var main = function() {
  var prtBack = function() {
    if ($('#prt').offset().left == (prtLeft - 430)) {
      $('#prt').animate({
        left: "+=430"
      }, 450);
    } else {
      $('#prt').animate({
        left: "-=430"
      }, 450);
    }
  }
  var abtBack = function() {
    if ($('#abt').offset().left == (abtLeft - 210)) {
      $('#abt').animate({
        left: "+=210"
      }, 450);
    }
  }

  //When any tab is clicked
  $('#hme, #abt, #prt').click(function() {
    $('#xBttn').toggle(300);
    $('#xBttn').click(function() {
      $('#xBttn').fadeOut(300);
      $('#hme, #abt, #prt').animate({
        opacity: 1
      }, 300);
      abtBack();
      prtBack();
    })
  })

  //When Home tab is clicked
  $('#hme').click(function() {
    if ($('#abt, #prt').css('opacity') == 0) {
      $('#abt, #prt').animate({
        opacity: 1
      }, 300);
    } else {
      $('#abt, #prt').animate({
        opacity: 0
      }, 300);
    }
  });

  var abtLeft = $('#abt').offset().left;
  //When About tab is clicked
  $('#abt').click(function() {
    if ($('#hme, #prt').css('opacity') == 0) {
      $('#hme, #prt').animate({
        opacity: 1
      }, 300);
    } else {
      $('#hme, #prt').animate({
        opacity: 0
      }, 300);
    }

    if ($('#abt').offset().left == (abtLeft - 210)) {
      $(this).animate({
        left: "+=210"
      }, 450);
    } else {
      $(this).animate({
        left: "-=210"
      }, 450);
    }
  });


  var prtLeft = $('#prt').offset().left;
  //When About tab is clicked
  $('#prt').click(function() {
    if ($('#hme, #abt').css('opacity') == 0) {
      $('#hme, #abt').animate({
        opacity: 1
      }, 300);
    } else {
      $('#hme, #abt').animate({
        opacity: 0
      }, 300);
    }

    if ($('#prt').offset().left == (prtLeft - 430)) {
      $(this).animate({
        left: "+=430"
      }, 450);
    } else {
      $(this).animate({
        left: "-=430"
      }, 450);
    }
  });
}



$(document).ready(main);

body {
  background: url('http://silviahartmann.com/background-tile-art/images/grey-repeating-background-8.jpg');
}
.mvLeft {
  right: 215px;
}
#bckDrp {
  left: 50%;
  transform: translate(-50%, 0);
  position: fixed;
  width: 85%;
  height: 100%;
  background: url('http://blog.spoongraphics.co.uk/wp-content/uploads/2012/textures/18.jpg');
}
#nav {
  background: rgba(0, 0, 0, 0.20);
}
.padExt {
  width: 100%;
  height: 100%;
  padding: 10px;
}
#nwsArea {
  height: 65%;
  width: 40%;
  background-color: grey;
  -webkit-transition: transform 1s, box-shadow 1s;
  border: 2px solid silver;
  box-shadow: 0 0 15px #777;
}
#nwsArea:hover {
  transform: skewY(3deg);
  box-shadow: -5px 15px 10px #777;
}
#nwsTtl {
  height: 100px;
  width: 100%;
  background-color: white;
  border-radius: 5px;
  text-align: center;
  border: 2px solid black;
}
#nwsTtl:hover {
  background-color: #E3E3E3;
}
#nwsTxt {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 40px;
}
#ruschin {
  height: 90%;
  width: 90%;
  padding: 5%;
}
#xBttn {
  height: 20px;
  padding: 8px;
  position: absolute;
  display: none;
}
#navLst {
  margin: 0 auto;
  text-align: center;
}
li {
  list-style-type: none;
  display: inline-block;
  -webkit-transition: color .5s;
}
li:hover {
  color: #2B2B2B;
}
.navOp {
  padding: 50px;
  font-size: 40px;
  font-family: 'Droid Sans', sans-serif;
}
#abt,
#prt {
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='bckDrp'>
  <div id='nav'>
    <img src='https://cdn2.iconfinder.com/data/icons/media-and-navigation-buttons-round/512/Button_12-128.png' id='xBttn'>
    <ul id='navLst'>
      <li class='navOp' id='hme'>Home</li>
      <li class='navOp' id='abt'>About</li>
      <li class='navOp' id='prt'>Portfolio</li>
    </ul>
  </div>
  <div class='padExt'>
    <div id='nwsArea'>
      <img src='https://www.scmp.com/sites/default/files/2014/05/20/tpbje20140520272_43042097.jpg' id='ruschin'>
      <div id='nwsTtl'>
        <h3 id='nwsTxt'>Russia and China begin joint military drill</h3>
      </div>
    </div>
  </div>
</div>