javascript - jQuery Code not working On Chrome - Stack Overflow

admin管理员组

文章数量:1314239

jQuery code

$(Document).ready(function() {
    var $download = $('#navbar li:nth-child(1)');
    var $about_us = $('#navbar li:nth-child(2)');

    $download.mouseenter(function() {
        $download.fadeTo('fast', 0.5);
    });

    $about_us.mouseenter(function() {
        $about_us.fadeTo('fast', 0.5);
    });

    $('#navbar li').mouseleave(function() {
        $('#navbar li').fadeTo('fast',1);
    });
});

With this code I am trying to make parts of a list darker when you hover. it works in Firefox but not on chrome, what am I doing wrong?

jQuery code

$(Document).ready(function() {
    var $download = $('#navbar li:nth-child(1)');
    var $about_us = $('#navbar li:nth-child(2)');

    $download.mouseenter(function() {
        $download.fadeTo('fast', 0.5);
    });

    $about_us.mouseenter(function() {
        $about_us.fadeTo('fast', 0.5);
    });

    $('#navbar li').mouseleave(function() {
        $('#navbar li').fadeTo('fast',1);
    });
});

With this code I am trying to make parts of a list darker when you hover. it works in Firefox but not on chrome, what am I doing wrong?

• javascript
• jquery
• google-chrome

Share Improve this question Follow edited May 2, 2016 at 18:16 marc_s 756k184184 gold badges1.4k1.4k silver badges1.5k1.5k bronze badges asked Apr 5, 2014 at 5:57 user3500457user3500457 111 gold badge11 silver badge11 bronze badge 3

• Don't use $download or $about_us... This is not PHP... It should only be var download and var about_us – prateekkathal Commented Apr 5, 2014 at 6:01
• 7 @kakashihatake2 - A mon naming convention is $variable when the variable references an element that is a jquery object. For instance, $body = $('body'); $body.css('color', 'red'). – Jack Commented Apr 5, 2014 at 6:07
• 1 Duplicate of only on chrome i got this error: Uncaught TypeError: Illegal constructor – dsgriffin Commented Apr 5, 2014 at 6:21

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

JavaScript is case-sensitive, so you'll need to use document instead of Document; they are two separate things in Chrome.

Document appears to be a constructor for something in Chrome, but I'm not sure about its usage.

I can reproduce the OP's bug and fix it just by changing Document to document:

http://jsfiddle/rn5v7/4/ will work on Firefox but not Chrome.

http://jsfiddle/rn5v7/5/ will work on both Firefox and Chrome.

The standard way to use DOM ready handler is, as on jQuery's doc:

$(document).ready(function() { ... })

or the shorthand:

$(function() { ... });

Note that as seen on Chrome, Document is a constructor function. It is the base class of HTMLDocument, which is the class for the object document.

document.__proto__ === HTMLDocument.prototype  // => true
HTMLDocument.prototype.__proto__ === Document.prototype  // => true

Firstly, $(Document) should be changed to low class $(document). Then more facts are below.

For Chrome, do not expect $ is always jQuery.

You can put $ into console to check if it returns default ƒ $(selector, [startNode]) { [Command Line API] }, if yes means $ is not defined for jQuery.

Luckily that we have below ways to try:

1. Solve the conflict of using $, let it be jQuery without any ambiguity

Firstly, you can put this code snippet

var jq = document.createElement('script');
jq.src = "https://code.jquery./jquery-3.3.1.min.js";  /* Include any online jquery library you need */
document.getElementsByTagName('head')[0].appendChild(jq);

into the Console, then put $.noConflict into console, if it not returns undefined, but returns ƒ (t){return e.$===w&&(e.$=Kt),t&&e.jQuery===w&&(e.jQuery=Jt),w}, it means $ is not defined for JQuery now.

Next you can continue to input your regional code, then you will find it works well now.

Refer: https://blog.wplauncher./run-jquery-in-chrome-console/

2. Using .js file instead in Chrome, then debug the JavaScript file.

Refer: Chrome DevTools Snippets

本文标签： javascriptjQuery Code not working On ChromeStack Overflow