Question

我有一个我建的小应用程序，但我想知道是否有办法让这段代码更加简洁/更容易

var i = -1;
$( "#next, #back, #remove"  ).click(function () {
var filters = [ "aden", "reyes", "perpetua", "inkwell", 
"toaster", "walden", "hudson", 
"gingham", "mayfair", "lofi", 
"xpro2", "1977", "brooklyn"]

function changefilter(){
  $('figure').removeClass().addClass(filters[i]);
  $('h1').text(filters[i]);
  console.log(filters[i]);
}

if (this.id == 'next' && i < filters.length) {
 i++;
 changefilter();
} else if (this.id == 'back' && i > -1 && i !== undefined) {
    i--;
    changefilter();} else if (this.id == 'remove'){
    i = -1;
    changefilter();
    }
});

基本上应用程序有3个按钮，它们将在图元素上循环该类。

我仍然非常新的javascript，我知道这将需要对范围做一些事情，但为什么如果我把“i”变量放在最顶层（内部）我的功能

var i = -1;
$( "#next, #back, #remove"  ).click(function () {
var filters = [ "aden", "reyes", "perpetua", "inkwell", 
"toaster", "walden", "hudson", 
"gingham", "mayfair", "lofi", 
"xpro2", "1977", "brooklyn"]

柜台不动？另外，我把“i”设为-1，因为我不希望在按钮被击中之前应用一个类。这是一个很好的方法吗？我还注意到，当按下删除按钮时，标题会保留在最近的选择中，并且不会恢复为-1选项

有没有办法让一个变量能够在一个函数中看到所有函数而不使它成为全局函数？有没有必要这样做？我甚至还有意义吗？

谢谢大家！

如果你想看到这个，我有一支笔http://codepen.io/Oreilly617/pen/KdrOom

Answer 1

var i = -1;
$( "#next, #back, #remove"  ).click(function () {
    var filters = [ "aden", "reyes", "perpetua", "inkwell", "toaster", "walden", 
                    "hudson", "gingham", "mayfair", "lofi", "xpro2", "1977", "brooklyn"];

switch (this.id) {
  case 'next':
    changefilter(++i);
    break;

  case 'back':
    changefilter(--i);
    break;

  case 'remove':
      i = -1;
      $('h1').text('Fun Filter');
      break;
}

function changefilter(i){
  var length = filters.length;
  var figure = $('figure');
  var current_class = figure.prop('class');

  if (i >= 0 && $.inArray(current_class) < (length - 1)) {
    figure.removeClass(current_class);
    $('figure').addClass(filters[i])
    $('h1').text(filters[i]);
  }  
}

});

Answer 2

我不确定这是否符合你的＃34;更浓缩＆＃34;但它确实解决了变量范围的问题，并演示了创建和使用对象来包含函数等。其中一些仍然有点冗长但为了清晰起见而保留了这一点。请注意，这也是＆＃34;周期＆＃34;通过你的列表，当下一个/后一个到达循环结束时返回基地。

如果你想玩它，这是一个小提琴：http://jsfiddle.net/MarkSchultheiss/9vzy3rLm/1/

var mything = {
    basei: -1,
    i: this.basei,
    figureSelector: 'figure.lens',
    defaultDisplay: 'Fun Filterc',
    filters: ["aden", "reyes", "perpetua", "inkwell",
        "toaster", "walden", "hudson",
        "gingham", "mayfair", "lofi",
        "xpro2", "1977", "brooklyn"],
    maxFilter: 0,
    maxFilterCalc: function () {
        this.maxFilter = this.filters.length - 1;
    },
    changefilter: function changefilter() {
        $(this.figureSelector).removeClass(this.filters.join(' ')).addClass(this.filters[this.i]);
        if (this.i == -1) {
            $('h1').text(this.defaultDisplay);
        } else {
            $('h1').text(this.filters[this.i]);
        }
    },
    processButton: function (me) {
        this.maxFilterCalc();
        if (me.id == 'next') {
            if (this.i < this.maxFilter) {
                this.i++;
            } else {
                this.i = this.basei;
            }
        } else if (me.id == 'back') {
            if (this.i > this.basei) {
                this.i--;
            } else {
                this.i = this.maxFilter;
            }
        } else if (me.id == 'remove') {
            this.i = this.basei;
        }
        this.changefilter();
    }
};
$("#next, #back, #remove").click(function () {
    mything.processButton(this);
});

JS变量范围和类更改

2 个答案: