CODEWITHSUNDEEP
javascriptjqueryhtmlcss
mistersupercoder
mistersupercoder

Reputation: 13

carousell every div does something else onclick

I just need some advice and help. I have 7 different divs and every div should do something else when clicking on it (owl carrousel).

Now i just have everything "hard coded" but that is not very efficiënt

Example:

when i click div 1: $(".div1").css('-webkit-filter','blur(5px)');

when i click div 2: $(".div2").css('-webkit-filter','grayscale(100%');

etc.

Do i need to keep "hard coded" or is there a better solution for my question?.

I am a real newbie.

Thanks in advance

Upvotes: 1

Views: 39

Answers (1)

Puzzle84
Puzzle84

Reputation: 540

Try doing something like:

/* Array of effects */
var effectArray = ['blur(5px)', 'grayscale("100%")'];

$(".divClass").click(function () {
    // Wrap the clicked item in jQuery.
    // .index() get its index 0 to "n".
    $(this).css('-webkit-filter', effectArray[$(this).index()]);
});

EDIT i forgot to wrap the divclass in jQuery. you can obviously do this without jQuery too

Also just realized you want it on click.

Upvotes: 1

Related Questions