Having trouble with jQuery's click() method. and event.data

Question

I'm building small script that lets you change the background image of a page on the fly for design comparisons.

I have a hacky version up and running, but I'm trying to solve this small issue just so I can improve my JS/jQuery skills.

Please look at the jsfiddle here: http://jsfiddle.net/misteroh/Yh22B/6/

The part of the code I'm trying to fix is here:

   var clickBind = function() {
      for (var j = 0; j < background.length; j++) {
          background[j].css({'background': 'url("' + directory + clickBind.data.value + '.jpg")', 'background-size':'cover', 'background-attachment':'fixed'});
          crumbSearch[0].css('background', '#F8F8F8');
          crumbSearch[1].css({'background': '#F8F8F8'});
          if (homepage) {
            $('.flexslider').css({'margin-top': '25px'});
          }
      }
    };

    for (i = 1; i <= bgOptions; i++) {
        bgSwitch.append('<li id="image'+ i + '"></li>');
        button.push($('li:last', bgSwitch));
        button[button.length - 1]
          .css({'background': 'url("' + directory + i + '.jpg")', 'background-size':'cover'})
          .click({ value: i }, clickBind);
    }

You see that for loop on the bottom? How can I pass the current iteration's value of "i" to the function at the top? I'm assuming the answer is something along the lines of this: http://api.jquery.com/event.data/

My logic behind the code is that in each iteration of the bottom for loop, button[button.length - 1] will be bound with the click event and the clickBind function would use the value of "i" to complete the url of the background image.

Obviously that's not happening. If I simply use "i" in the clickBind's for loop, console.log shows that the value of "i" is always 8.

Please help!

Answer 1

There are a few things you should do to hopefully fix this:

First, your for-loop should look like below.

for (i = 1; i <= bgOptions; i++) {
    bgSwitch.append('<li id="image'+ i + '"></li>');
    button.push($('li:last', bgSwitch));
    button[button.length - 1]
      .css({'background': 'url("' + directory + i + '.jpg")', 'background-size':'cover'})
      // CHANGED:
      .click({value:i},function(event) {
          clickBind(event.data.value);
      });
}

Next (probably obvious step) is to tell your clickBind function to use this i instead of clickBind.data.value :

var clickBind = function(i) {
    for (var j = 0; j < background.length; j++) {
        // Replace clickBind.data.value with i:
        background[j].css({'background': 'url("' + directory + i + '.jpg")', 'background-size':'cover', 'background-attachment':'fixed'});
        crumbSearch[0].css('background', '#F8F8F8');
        crumbSearch[1].css({'background': '#F8F8F8'});
        if (homepage) {
            $('.flexslider').css({'margin-top': '25px'});
        }
    }
};

Here is a fiddle that works for me

Let me know if this works for you!

I changed some stuff around in your last for-loop . 我在您的最后一个for-loop更改了一些内容。 I am not used to strict mode, so hopefully this method will work for you. If not, we can pursue other options!