Question

我正在尝试理解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();
})();

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

JavaScript模块。点击时增加数组

1 个答案: