Javascript syntax error when trying to use a variable in the argument of a function

Question

I have a slider (the slick.js one) and I want to filter my slide by colors (red,green,blue). In my chrome console, it works fine when I filter using this syntax:

$('.my-class').slick('slickFilter', '.green');

However, now I want to change '.green' automatically. For this, in my file I have a variable called selected_color which return: red, green or blue.

However, in my file, if I do this:

var selected_color = variant.featured_image.alt;
// the next line is for debug purpose        
console.log(selected_color, "'." + selected_color + "'");      
$('.my-class').slick('slickFilter', "'." + selected_color + "'");

It returns me:

green '.green'
Uncaught Error: Syntax error, unrecognized expression: '.green'

I don't get where I made a syntax error because the "'." + selected_color + "'" returned '.green' and that's working in the console.

Answer 1

As it was pointed out in the comments, I had extra quotes when I shoudn't. What I needed to do was: $('.my-class').slick('slickFilter', "." + selected_color);.