add class to next element jquery click function

Question

I have created a vertical slider and I want the classes to move onto the next div on click (next) and previous on click (prev)

here is my code and fiddle

$(".bxslider-inner:nth-child(4n+1)").addClass('noBlur');
$(".bxslider-inner:nth-child(4n+2)").addClass('Blur1');
$(".bxslider-inner:nth-child(4n+3)").addClass('Blur2');
$(".bxslider-inner:nth-child(4n)").addClass('Blur3');

$("a.bx-next").click(function(){
   $(".bxslider-inner:nth-child(4n+1)").next().addClass('noBlur');
$(".bxslider-inner:nth-child(4n+2)").next().addClass('Blur1');
$(".bxslider-inner:nth-child(4n+3)").next().addClass('Blur2');
$(".bxslider-inner:nth-child(4n)").next().addClass('Blur3');
});


$("a.bx-prev").click(function(){
   $(".bxslider-inner:nth-child(4n+1)").prev().addClass('noBlur');
$(".bxslider-inner:nth-child(4n+2)").prev().addClass('Blur1');
$(".bxslider-inner:nth-child(4n+3)").prev().addClass('Blur2');
$(".bxslider-inner:nth-child(4n)").prev().addClass('Blur3');
});

fiddle seems to work for me with Chrome, what is wrong with yours? — Jordi Castilla
– Jordi Castilla, Commented Mar 17, 2015 at 11:29

Community · Accepted Answer · 2017-05-23 10:10:07Z

1

Classes seem to be colliding with each other. I'd suggest cleaning current classes before adding the 'blur' classes, e.g. :

$(".bxslider-inner:nth-child(4n+1)").next().removeClass().addClass('bxslider-inner').addClass('noBlur');

etc... Problem is it only works for he first click on the button, as

$(".bxslider-inner:nth-child(4n+1)").next()

Will always be the same element. You now need to find a way to fetch the right elements on your click function.

Some elements here : In bxslider i want to add a class on current slide

edited May 23, 2017 at 10:10

CommunityBot

11 silver badge

answered Mar 17, 2015 at 11:51

BillBokeey

3,57216 silver badges32 bronze badges

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

2 Comments

Zi_31 Over a year ago

Looking at this again is it possible make the first child act as last child on click so the the second child acts as the first and so on...

BillBokeey Over a year ago

Maybe you can create a variable i and increment/decrement it on button clicks, then go fetch the divs you want with $(".bxslider-inner:nth-child(i)").next() $(".bxslider-inner:nth-child(i+1)").next() and so on

Tony Gustafsson · Accepted Answer · 2015-03-17 11:29:55Z

0

They seem to be on the same level of the DOM tree, so you would use:

$(this).next().click();

answered Mar 17, 2015 at 11:29

Tony Gustafsson

9281 gold badge8 silver badges19 bronze badges

Collectives™ on Stack Overflow

add class to next element jquery click function

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related