我应该如何初始化此变量以与jQuery一起使用？

Question

What I'd like to do is make a variable that is a specific class/id object. For example, on lines (5) and (8) where I do a literal reference of the ID, shoe-carousel, I want to have a variable that represents shoe-carousel instead. The problem is that if I do something like:

var fooCarousel = $('.shoe-carousel');

it'll work for line (5), not for line (8)

1. //initialize the slide in focus and what will be the center slide
2. var slideInFocus = document.createElement('img');
​3. 
4. //set the index of the immediate slide in focus when the page loads
5. slideInFocus.index = $('.shoe-carousel').slick('slickCurrentSlide');
6.     
7. //set the source of the immediate slide in focus when the page loads
8. slideInFocus.src = $('.shoe-carousel .slick-current img').prop('src');

To me, it seems like the issue with line 8 is that the single-quotes (') being pushed in from the variable definition are ruining it; so, what's the trick to give to a new JS/jQuery guy like me? Thanks!

Answer 1

There's no problem doing it the way you are suggesting, the issue is I think your implementation in line 8. How are you trying to call it? Something like this would work well. .find() will find the selector within the jquery object you are calling it from.

1. var $fooCarousel = $('.shoe-carousel');
2. var slideInFocus = document.createElement('img');
​3. 
4. //set the index of the immediate slide in focus when the page loads
5. slideInFocus.index = $fooCarousel.slick('slickCurrentSlide');
6.     
7. //set the source of the immediate slide in focus when the page loads
8. slideInFocus.src = $fooCarousel.find('.slick-current img').prop('src');

Answer 2

After first realizing I posted a not-appropriate answer, then reading comments under @Redmega's answer, I think that the most efficience response to the OP's issue is like this:

var fooCarousel = $('.shoe-carousel');
1. //initialize the slide in focus and what will be the center slide
2. var slideInFocus = document.createElement('img');
​3. 
4. //set the index of the immediate slide in focus when the page loads
5. slideInFocus.index = fooCarousel.slick('slickCurrentSlide');
6.     
7. //set the source of the immediate slide in focus when the page loads
8. slideInFocus.src = $('.slick-current img', fooCarousel).prop('src');

While very close to the $fooCarousel.find('.slick-current img') solution, this way has probably the less performance impact.

Edit: actually it doesn't make any difference, as pointed by @Redmega.

Answer 3

Warning : as pointed by others, this answer doesn't solve the OP issue. I too quickly read the question, so the proposed code below would works only with fooCarousel containing the string id!

Yes it's what you guessed.
And it's easy to workaround, using usual concatenation, like this:

1. //initialize the slide in focus and what will be the center slide
2. var slideInFocus = document.createElement('img');
​3. 
4. //set the index of the immediate slide in focus when the page loads
5. slideInFocus.index = fooCarousel.slick('slickCurrentSlide');
6.     
7. //set the source of the immediate slide in focus when the page loads
8. slideInFocus.src = $(fooCarousel + ' .slick-current img').prop('src');