Selecting and changing multiple CSS classes with jQuery

Question

I have a twitter bootstrap carousel component and I want to detect it's slide function, through that, foreground color of another component should be changed at each slide move.

$('#welcomeCarousel').on('slide',function(e){
   var index = $(this).find('.active').index();       
   if(index==1) {
   $('.navbar-inverse .brand:hover,
      .navbar-inverse .nav > li > a:hover,
      .navbar-inverse .brand:focus,
      .navbar-inverse .nav > li > a:focus').css('color': 'rgb(255, 255, 255)');
   }
});

I think problem occurs because of selecting multiple CSS classes, there should be sth. wrong about it because index has correct value. JS console says unexpected token or unexpected string.

jsfiddle.

Ivan Chernykh · Accepted Answer · 2013-06-28 07:40:21Z

3

Try this syntax:

.css({'color': 'rgb(255, 255, 255)'});

Documentation: http://api.jquery.com/css/#css-properties

answered Jun 28, 2013 at 7:40

Ivan Chernykh

42.2k13 gold badges136 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ömer Faruk Almalı Over a year ago

Still throws Uncaught SyntaxError: Unexpected token .

gdoron · Accepted Answer · 2013-06-28 07:41:46Z

0

.css('color': 'rgb(255, 255, 255)');

Should be:

.css('color', 'rgb(255, 255, 255)');

Had you wanted to change multiple css properties, you use this syntax:

.css({'color': 'rgb(255, 255, 255)', diffrentProp : 'SomeValue'});

answered Jun 28, 2013 at 7:41

community wiki

gdoron

7 Comments

Ömer Faruk Almalı Over a year ago

Still throws Uncaught SyntaxError: Unexpected token .

gdoron Over a year ago

@ÖmerFarukAlmalı. OH God! You didn't concate the stings in those multiple lines! check out your selector!

Ömer Faruk Almalı Over a year ago

OH God! even that throws Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: hover

gdoron Over a year ago

@ÖmerFarukAlmalı, Create a jsFiddle.

Ömer Faruk Almalı Over a year ago

I've created check question.

|

Ömer Faruk Almalı · Accepted Answer · 2013-06-28 11:25:00Z

0

I found a quicker way to do it, first of all, I've defined another CSS class:

.newClass .brand:hover,
.newClass .nav > li > a:hover,
.newClass .brand:focus,
.newClass .nav > li > a:focus {
    color: rgb(255, 255, 255);
}

Then, it is easy to toggle or remove this class:

if(index==1) {
    $('#myNavigationBar').toggleClass("newClass");
}
if(index==0) {
    $('#myNavigationBar').removeClass("newClass");
}

answered Jun 28, 2013 at 11:25

Ömer Faruk Almalı

3,8226 gold badges40 silver badges63 bronze badges

Collectives™ on Stack Overflow

Selecting and changing multiple CSS classes with jQuery

3 Answers 3

1 Comment

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related