javascript - Jquery 变量问题

Question

我有以下示例:http://jsfiddle.net/gespinha/yTjUL/13/

该变量应在点击时触发，使链接的类从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
    });

});

Answer 1

您似乎有这样的印象:变量将存储一系列操作，以便稍后在“调用”变量时执行，但这不是(显然)发生的情况:第一行​​，在 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 中使用 javascript:void(0)，只需使用 jQuery 来阻止默认操作:

$(document).ready(function () {
    $('#link').click(function (e) {
        e.preventDefault();
        $(this).toggleClass('on off');
    });
});

JS Fiddle demo .

引用文献:

• click() .
• event.preventDefault() .
• toggleClass() .