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, Mar 17 '15 at 11:29

score 1 · Answer 1 · edited May 23 '17 at 10:10

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 '17 at 10:10

Community

1
1

answered Mar 17 '15 at 11:51

BillBokeey

3,168
14
28

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... – Zi_31 Mar 19 '15 at 11:43
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 – BillBokeey Mar 19 '15 at 11:59

score 0 · Answer 2 · answered Mar 17 '15 at 11:29

0

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

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

answered Mar 17 '15 at 11:29

Tony Gustafsson

828
1
7
18

add class to next element jquery click function

2 Answers2