Question

我有以下示例：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
    });

});

Answer 1

你似乎认为变量将存储一系列动作，以便稍后执行，当变量被“调用”时，但这不是（明确地）发生的事情：{{1}内的第一行处理程序，在ready()赋值中，找到var元素并执行您指定的操作，将.on元素存储在变量中（因为jQuery方法几乎都返回{ {1}}对象）。

相反：

.on

或者，更简单地说（如果你想在'状态'之间切换）使用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'); }); });，而是使用jQuery来阻止默认操作，使用：

javascript:void(0)

JS Fiddle demo

参考文献：

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变量。只需将您的代码放入click事件中即可。此外，链接选择器需要是“#link”，而不是“链接”。

Answer 4

通过这样做，您将执行这些操作并在$myVar内存储返回值（将是jQuery元素）。您可以将代码放在单击触发器功能中。

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

另外，您忘记了身份证之前的#。否则，您的代码将选择link标记，而不是标识为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');
  });
});

Jquery问题与变量

6 个答案: