javascript - 带有变量的Jquery问题

Question

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

该变量应该在 上触发click，使链接从ontooff更改为并将颜色从红色更改为绿色。但相反，它开始时已经是绿色的，因此使该功能无用。

为什么它不起作用？

HTML

<a id="link" href="javascript:void(0)" class="on">CLICK HERE</a>

查询

$(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');
    });
});

此外，不要在 中使用javascript:void(0)，href只需使用 jQuery 来防止默认操作，使用：

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

JS 小提琴演示。

参考：

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

Answer 2

它不是那样工作的，变量将只包含您调用的任何方法的结果，对于 jQuery，这意味着将返回元素，因此变量$myVar仅在事件处理程序内部等于$(document)，它不会再次调用链式方法.

你所要做的：

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

Answer 3

$(document).ready(function () {
    $('#link').click(function () {
        $(".on").addClass("off").removeClass("on");
    });
});

正如 Guilherme Sehn 所指出的，不需要 $myVar 变量。只需将您的代码放在点击事件中。另外，链接选择器需要是“#link”，而不是“link”。

Answer 4

通过这样做，您将执行这些操作并将返回值（将是 jQuery 元素）存储在$myVar. 你可以把你的代码放在点击触发函数中。

$('#link').click(function () {
    $('.on').addClass('off').removeClass('on');
});

另外，您忘记了#之前的ID。没有它，您的代码将选择link标签，而不是带有 id 的元素link。而且您不需要明确使用$(document).find('.on')，因为所有 DOM 元素都在其中。

Answer 5

我猜你的意思是$("#link")...而不是$("link")

如果我理解正确 - 完整的脚本应该是：

$(document).ready(function(){
    $("#link").click(function(){
         $(".on").addClass("off").removeClass("off");
    });

});

Answer 6

您没有调用该函数，并且您的选择器是错误的。

$(document).ready(function () {
  $('#link').click(function () {
      $(document).find('.on').addClass('off').removeClass('on');
  });
});