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