CODEWITHSUNDEEP
javascriptjquery
8protons
8protons

Reputation: 3959

How should I initialize this variable for use with jQuery?

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!

Upvotes: 1

Views: 112

Answers (3)

cFreed
cFreed

Reputation: 4474

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.

Upvotes: 1

Redmega
Redmega

Reputation: 683

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');

Upvotes: 1

cFreed
cFreed

Reputation: 4474

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');

Upvotes: 0

Related Questions