JavaScript .click函数无法在$（document）.ready tags {}

Question

是的，所以我正在开发一个项目并遇到了一个问题。 请注意我仍然在开发我的JavaScript有效编程技能：）

目标

我试图将点击的链接传递给名为 currentNavElement 的变量，然后使用$(currentNavElement).offset()确定偏移量。 结果存储在名为 navPosition 的var中。 navPosition 然后用于确定定位并且不能具有CSS属性top：0。 navBorder 是用于为nav-border的顶级CSS属性设置动画的变量在 currentNavElement 的偏移量上。

我在做什么

我用$(document).ready(function() {包围我的函数来启动里面的函数，但设置中的Click函数由于某种原因（或没有传递给全局）不起作用变量）

已编辑的代码 - 根据@Mark_M

的建议调用animateBorder

var currentNavElement;

setup: $(document).ready(function() {
    /* Am I calling animateBorder right? */
    $(".nav-element a").click(function(animateBorder) {
        currentNavElement = $(this).parent(".nav-element");
    })
})

animateBorder: $(document).ready(function() {
    var navPosition = $(currentNavElement).offset() , 
        navBorder = !!(navPosition && navPosition.top >= 0) && navPosition.top;

    if (!1 === navBorder) return !1;
    $("#nav-border").css('top', navBorder)

})

错误的

JavaScript代码

var currentNavElement;

setup: $(document).ready(function() {
    $(".nav-element a").click(function() {
        currentNavElement = $(this).parent(".nav-element");
    })
})

animateBorder: $(document).ready(function() {
    var navPosition = $(currentNavElement).offset() , 
        navBorder = !!(navPosition && navPosition.top >= 0) && navPosition.top;

    if (!1 === navBorder) return !1;
    $("#nav-border").css('top', navBorder)

})

以下代码有效（但没有$（this）点击识别传递给变量）。相反，我按.nav-element a定义第一个导航链接。

可运行的JavaScript代码

var currentNavElement;

setup: $(document).ready(function() {
        currentNavElement = $(".nav-element a").parent(".nav-element");
})

animateBorder: $(document).ready(function() {
    var navPosition = $(currentNavElement).offset() , 
        navBorder = !!(navPosition && navPosition.top >= 0) && navPosition.top;

    if (!1 === navBorder) return !1;
    $("#nav-border").css('top', navBorder)

})

这是我的全局变量，就绪函数或它是如何被访问的问题吗？

先谢谢你

Answer 1

您应该定义功能然后可以调用。我不确定你在哪里看到冒号的语法，但这不是你想要的。要定义函数，请使用：

function functionName(arguments) {
   // function body
}

要使用此功能，请调用它：

functionName(arguments)

我不确定您要对代码做什么，但这是连接点击/动画功能的工作版本的一种方法：

var currentNavElement;

// function to handle clicks
function handleCLick(e) {
  currentNavElement = $(this).parent(".nav-element");
  // now call animate border
  animateBorder()
}
// function to move element
function animateBorder() {
  var navPosition = $(currentNavElement).offset()
  var  navBorder = (navPosition && navPosition.top >= 0) && navPosition.top;
  if (navBorder) $("#nav-border").css('top', navBorder)
}
$(document).ready(function() {
  // pass the click handler to click()
  $(".nav-element a").click(handleCLick)
})

.nav-element {
  top: 20px;
  /*display: inline-block*/
}

#nav-border {
  border: 1px solid #333;
  position: absolute;
  top: 0px;
  left: 20px;
  padding: .5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="nav-border">
  <p class="nav-element">
    <a href="#">click me</a>
  </p>
</div>