How to create a string and use a function that's named after it?

Question

Sorry for bad wording in the question but it's hard to explain for me. I'm using several bxsliders on a page and some are placed in hidden divs. Unfortunately images are not shown in the slider after making the parent div visible unless the slider is reloaded (See here: bxSlider within show/hide divs). So let's say I initiate the sliders at the beginning with:

var slider_0=$("#slider_0 .bxslider").bxSlider({
    //bxslider options here
});

var slider_4=$("#slider_4 .bxslider").bxSlider({
    //bxslider options here
});

var slider_7=$("#slider_7 .bxslider").bxSlider({
    //bxslider options here
});

The sliders are not consecutively numbered but there is a navigation and if I click the 7th element it leads to slider_7. So I could get the index of the clicked item with:

$(this).index();

When I call slider_7.reloadSlider(); it would work but I don't know which slider the user clicks and which number it has. So would it be possible to call that with a created string like this:

slider_name='slider_'+$(this).index();
slider_name.reloadSlider();

works not of course. Is there a way to do it?

It sounds like your slider html looks like this: `
`, then your init should be `var slider_4=$("#slider_0").bxSlider({});` and you can target them with `$("#slider_" + $(this).index()).reloadSlider();` — Johan Karlsson, Sep 23 '14 at 14:28

score 3 · Answer 1 · answered Sep 23 '14 at 14:14

3

I would create a dictionary with strings as keys and functions as values. Then, you could have O(1) lookup of the functions you're targeting.

In general, you can do it like so:

// set up your dictionary
var dictionary = {};

// add your functions
dictionary['methodName'] = function() {};

// call the functions
dictionary['methodName']();

So, for your example, you could do:

dictionary['slider_7'] = slider_7.reloadSlider;

dictionary['slider_'+$(this).index()]();

answered Sep 23 '14 at 14:14

Luke Willis

8,429
4
46
79

Thanks for the tip but it doesnt seem to work for me because I set up the sliders in php before. So my code is: ... $sliders['slider_'.$u]='slider_'.$u.'.reloadSlider()'; } } //it's a loop ?> and then var dictionary= – user2718671 Sep 24 '14 at 07:17
eval("slider_" + $(this).index()).reloadSlider(); was working for me – user2718671 Sep 24 '14 at 08:11
@user2718671 if you need a php solution, then your question should reflect that. – Luke Willis Sep 24 '14 at 12:59
Yeah that's true. I just didn't want to overcomplicate it because I thought there would be a simple javascript solution and I'm glad that with eval() there was one ;) – user2718671 Sep 24 '14 at 13:02

score 2 · Answer 2 · answered Sep 23 '14 at 14:14

2

You could trigger it with

window["slider_" + $(this).index()].reloadSlider()

Although, I'm not sure whether your approach is the best. I think I'd go with arrays or with object (as a key-value pairs)

answered Sep 23 '14 at 14:14

leopik

2,323
2
17
29

Thx. That was close but you can't use an object property this way. It's the wrong syntax. But console.log(window["slider_" + $(this).index()]) selects the right object. I found the following solution: eval("slider_" + $(this).index()).reloadSlider(); – user2718671 Sep 24 '14 at 08:07

score 1 · Answer 3 · answered Sep 23 '14 at 14:15

1

Try this:

slider_name='slider_'+$(this).index();
$("#" + slider_name + " .bx_slider").reloadSlider();

answered Sep 23 '14 at 14:15

Johan Karlsson

6,419
1
19
28

Thx. That's what I tried at first but it didn't work. That's the reason I posted this question ;) – user2718671 Sep 24 '14 at 07:18

Jared Smith · Answer 4 · 2014-09-24T12:53:04.470

Its not entirely clear here what you want/are trying to do. What it seems like you want to do is get a programmatic handle on a specific slider when a user clicks a specific part of your page. You do not accomplish this by eval()ing a string...that's what event handlers are for. So create a click event handler and in that event handler

$('#idOfWhatTheUserClicksOn').click(function(event) {
    var slider = document.getElementById('#idOfRelatedSlider');
    $(slider).bxSlider();
    //if you need the current value of the slider you can get that too
    var value = slider.value;
});

You could achieve the same with fewer LOC by using a class instead of id's with different handlers, but the concept is the same.

Thx. But I don't get it how to connect these code snippets with my example. Btw it's not the slider I'm clicking on, it's a navigation that shows the div with the slider so I guess that won't work anyway. Still thanks! — user2718671, Sep 24 '14 at 07:58

score 1 · Accepted Answer · answered Sep 24 '14 at 08:08

1

Found a working solution:

eval("slider_" + $(this).index()).reloadSlider();

answered Sep 24 '14 at 08:08

user2718671

2,866
9
49
86

score 0 · Answer 6 · answered Sep 23 '14 at 14:19

0

var slider_cache = [
    $("#slider_0 .bxslider").bxSlider(),
    $("#slider_1 .bxslider").bxSlider(),
    $("#slider_2 .bxslider").bxSlider()
];

...

slider_cache[$(this).index()].reloadSlider();

answered Sep 23 '14 at 14:19

mike nvck

454
2
9

How to create a string and use a function that's named after it?

6 Answers6