0

我正在尝试理解 JavaScript 模块。因此，我正在使用该模式，或者至少我认为这是在单击时循环遍历数组的模式。

每次单击都应显示数组中的下一个值。

当达到数组中的最后一个值并再次注册点击时，循环应该重新开始。

页面将加载，显示数组开头的值。

例如，数组包含 ['green','yellow','red']

页面加载 = 显示的值为绿色

click = 显示的值为黄色

click = 显示的值为红色

click = 显示的值为绿色

等等。

这是我到目前为止的小提琴：http: //jsfiddle.net/TYj3p/

这是HTML：

<p>The color is <span id="print"></span>.</p>

这是我拥有的 JavaScript，但我在点击部分很糟糕：

var s;
var ele;

Next = {

  settings : [
      {color : 'green'},
      {color : 'yellow'},
      {color : 'red'}
  ],

  elements : {
       span : $('#print')
  },

  init : function() {
      //kick things off
      s = this.settings;
      ele = this.elements;
      this.bindUIActions();
  },

  bindUIActions : function() {
      ele.span.ready(function() {
          Next.loadText();
      });
      ele.span.on('click', function() {
          Next.changeText();
      });
  },

  loadText : function() {
      ele.span.text(s[0].color);
  },

  changeText : function() {
      var i = 0;
      ele.span.text(s[i].color);
      i++;
  }

};

(function() {
    Next.init();
})();
4

1 回答 1

1

看看这个演示：http: //jsfiddle.net/TYj3p/7/

添加一个按钮并在 onClick 方法上调用 changeText。

<button onclick="Next.changeText();">Click</button>

在你 changeText 函数检查当前颜色的索引，如果它是最后一个元素，则显示第一个。你的 changeText 函数应该是这样的：

changeText : function() {
    var index = Next.indexOfColor(ele.span.text());
    if(index < s.length-1) {
        ++index;
        ele.span.text(s[index].color);
    } else {
        ele.span.text(s[0].color);
    }
},

添加此函数以返回当前颜色的索引值。

indexOfColor: function (color) {
    for(var i=0; i < s.length; i++) {
       if(s[i].color == color) 
           return i; 
    }
    return -1;
}
于 2013-08-12T02:16:28.040 回答