JavaScript模块.单击时递增数组

JavaScript Module. Increment array on click

本文关键字：数组 模块 单击 JavaScript      更新时间：2023-09-26

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

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

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

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

例如，数组包含["绿色"、"黄色"、"红色"]

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

点击=显示的值为黄色

点击=显示的值为红色

点击=显示的值为绿色

等等

以下是我迄今为止所掌握的信息：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();
})();

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

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

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

在您更改Text函数时，检查当前颜色的索引，如果它是最后一个元素，则显示第一个元素。你的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;
}
相关文章：