jQuery css（）on。（'click'…不起作用

Question

Here is my JQuery code:

$(document).ready(function () {
    $("ul.navbar").on("click", "li", function() {
        $(this).find("h2").css("color: pink");
        alert($(this).text());
        alert($(this).find("h2").text());
    });
});

The click generates the alerts correctly, but the color of the text does not change. I've tried .addClass() too and that also does not work. Any ideas? I've perused a lot of the other similar questions but not found them helpful, I'm a real newb to Javascript and still stuck.

Answer 1

You are using .css() incorrectly -

It should be like this -

$(this).find("h2").css("color","pink");

API ---> http://api.jquery.com/css/

Answer 2

Change this:

$(this).find("h2").css("color: pink");

to that:

$(this).find("h2").css("color", "pink");

Answer 3

JQuery css function takes two parameters, you are using it incorrectly.

Correct parameters are as below

$(this).find("h2").css("color" ,"pink");

Answer 4

或这个：

$(this).find("h2").css( {color: "pink" } );

Answer 5

jQuery's CSS function takes arguments in two styles:

• As a single name/value pair:

   .css('stylename' , 'value') 

  Two parameters in the function call, so separated by a comma.

  ...in which case, your code would look like this:

   .css('color', 'pink')` 

  Note: Both parameters are strings, so must be in quotes. It doesn't matter whether you use single or double quotes.

• As an object containing multiple name/value pairs:

   .css({'stylename':'value' , 'stylename':'value' , etc}) 

  One parameter, but defined as an object, so enclosed in curly braces; each name/value separated from each other by a colon; and each pair of name/values separated by a comma.

  ...in which case, your code would look like this:

   .css({'color': 'pink'})` 

  As before, it doesn't matter about single or double quotes, but note that since this is an object structure, the quotes around the style names are optional (although not in all cases, so it's probably best to stick to always having them).

The first syntax was originally the only one available; the latter syntax was added in a later version of jQuery to allow more than one style to be set in a single call.

If you're only changing a single style value then it doesn't matter which syntax you use. If you're changing more than one style at a time, then obviously it's better to use the second syntax rather than making multiple calls using the first one.

Answer 6

Your code seems to work for me:

$(document).ready(function () {
    $("ul.navbar").on("click", "li", function() {
        $(this).find("h2").css("color","pink");
        alert($(this).text());
        alert($(this).find("h2").text());
    });
});

jsFiddle

Which jQuery are you using?