jQuery的問題與可變

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

你似乎有這樣一種印象，變量將存儲的動作後執行，當變量是一個鏈條下「叫」，但是這不是（顯然）會發生什麼情況：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'); 
    }); 
}); 

此外，而不是使用hrefjavascript:void(0)，只需使用jQuery來防止默認動作，與：

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

JS Fiddle demo。

參考文獻：

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

Answer 2

通過這樣做，你會執行這些動作和存儲返回值（這將是jQuery的元素）內$myVar。您可以將您的代碼放入點擊觸發器功能中。

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

此外，您忘記了您的ID之前的#。如果沒有，您的代碼將選擇link標籤，而不是標識爲link的元素。因爲所有DOM元素都在裏面，所以你不需要明確地使用$(document).find('.on')。

Answer 3

它不會這樣工作，變量將只包含您調用的任何方法的結果，對於jQuery，這意味着元素將被返回，因此變量$myVar僅等於$(document)在事件處理程序中，它會不要再次調用鏈接的方法。

你要做的：

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

Answer 4

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

如果我理解正確的 - 完整的腳本應該是：

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

}); 

Answer 5

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

由於吉列爾梅澤恩指出的那樣，$ myVar的變量不需要。只需將您的代碼放入點擊事件即可。另外，鏈接選擇器需要是「#link」，而不是「link」。

Answer 6

您不調用該函數並且您的選擇器是錯誤的。

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