Question

我正在构建一个小脚本，让您可以动态更改页面的背景图像以进行设计比较。

我有一个hacky版本正在运行，但我正试图解决这个小问题，这样我就可以提高我的JS / jQuery技能。

请在这里查看jsfiddle：http://jsfiddle.net/misteroh/Yh22B/6/

我试图解决的代码部分在这里：

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

你看到底部的循环？如何传递当前迭代的＆＃34; i＆＃34;到顶部的功能？我假设答案是这样的：http://api.jquery.com/event.data/

我的代码背后的逻辑是，在底部for循环的每次迭代中，button [button.length - 1]将与click事件绑定，clickBind函数将使用＆＃34; i＆＃34的值;完成背景图片的网址。

显然没有发生。如果我只是使用＆＃34;我＆＃34;在clickBind for循环中，console.log显示＆＃34; i＆＃34;的值。永远是8.

请帮忙！

Answer 1

有一些事情你应该做些希望解决这个问题：

首先，你的for循环应该如下所示。

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

下一步（可能很明显的一步）是告诉您的clickBind函数使用此i代替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

请告诉我这是否适合您！

编辑：我在上一期for-loop更改了一些内容。我不习惯严格的模式，所以希望这个方法对你有用。如果没有，我们可以寻求其他选择！

遇到jQuery的click（）方法问题。和event.data

1 个答案: