JavaScript模块。 点击增加数组

Question

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

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

当到达数组中的最后一个值并再次单击时，将重新开始循环。

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

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

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

点击=显示的值为黄色

点击=显示的值为红色

单击=显示的值为绿色

等等。

这是到目前为止我的小提琴： 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();
})();

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