带有变量的Jquery问题
带有变量的Jquery问题
提问于 2013-11-01 22:51:31
我有以下示例：http://jsfiddle.net/gespinha/yTjUL/13/
该变量应在click上触发，使链接类从on更改为off，并将颜色从红色更改为绿色。但相反，它已经开始绿色，从而使函数无用。
为什么不起作用？
HTML
<a id="link" href="javascript:void(0)" class="on">CLICK HERE</a>JQUERY
$(document).ready(function () {
var $myVar = $(document).find('.on').addClass('off').removeClass('on');
$('link').click(function () {
$myVar
});
});回答 6
Stack Overflow用户
回答已采纳
发布于 2013-11-01 22:54:39
您的印象似乎是，当变量“被调用”时，变量将存储要执行的一系列操作，但情况并非如此(很明显)：在ready()处理程序中，在var赋值中，第一行查找.on元素并执行您指定的操作，将.on元素存储在变量中(因为jQuery方法几乎都返回this对象)。
相反：
$(document).ready(function () {
// use the `#link` notation, since 'link' is the id of the element:
$('#link').click(function () {
// assign a function to the click-event handler:
$('.on').addClass('off').removeClass('on');
});
});或者，更简单地(如果您想在“状态”之间切换)使用toggleClass()和$(this) (而不是每次用户单击给定元素时从整个文档中选择)：
$(document).ready(function () {
$('#link').click(function () {
$(this).toggleClass('on off');
});
});此外，与其在href中使用href，不如使用jQuery来防止默认操作，包括：
$(document).ready(function () {
$('#link').click(function (e) {
e.preventDefault();
$(this).toggleClass('on off');
});
});JS Fiddle演示。
参考文献：
click()。event.preventDefault()。toggleClass()。
Stack Overflow用户
发布于 2013-11-01 22:54:38
它不是这样工作的，变量只包含您调用的任何方法的结果，对于jQuery，这意味着元素将被返回，因此变量$myVar只等于事件处理程序中的$(document)，它不会再次调用链式方法。
你必须做：
$(document).ready(function () {
$('#link').on('click', function () {
$('.on').toggleClass('on off');
});
});Stack Overflow用户
发布于 2013-11-01 22:57:01
$(document).ready(function () {
$('#link').click(function () {
$(".on").addClass("off").removeClass("on");
});
});正如Guilherme所指出的，不需要$myVar变量。只需将代码放在click事件中即可。此外，链接选择器需要是"# link "，而不是"link“。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19736682
复制相关文章
相似问题
腾讯云开发者
