JavaScript .click 函数在 $(document).ready tags{} 中不起作用

Question

>右，所以我正在开发一个项目，遇到了一个问题。 请注意，我仍在发展我在JavaScript有效编程方面的技能:)

目的

我正在尝试将单击的链接传递给一个名为currentNavElement的变量，然后使用该变量使用$(currentNavElement).offset()确定偏移量。 结果存储在名为navPosition的变量中。navPosition然后用于确定定位，并且不能具有 CSS 属性 top ：0.navBorder是一个变量，用于根据currentNavElement的偏移量对导航边框的顶部 CSS 属性进行动画处理。

我在做什么

我用$(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>