骑自行车穿过Javascript Array

我有一个javascript数组，mediaSizes如下：['xs','md','lg']。骑自行车穿过Javascript Array

我使用变量media来引用数组中的特定索引。因此媒体可以是0,1或2.因此mediaSizes[media]应输出xs,md或lg。

我有上下箭头供用户循环访问这个数组。但是，当用户单击向上箭头，并且media的值为2时，我希望用户循环回到xs。同样，如果用户按下xs上的向下箭头，我希望它们循环到较大。

我有以下ifelse的声明，但它似乎并不奏效：

var mediaSizes = ['xs','md','lg']; 

    var media = 0; 

    $scope.mediaDisplay = mediaSizes[media]; 

    $scope.changeMedia = function(direction) { 
    if (media > 2 || media < 0) { 
     media = 0; 
    } else { 
     if (direction == 'up') { 
     media ++; 
     $scope.mediaDisplay = mediaSizes[media]; 
     } else { 
     media --; 
     $scope.mediaDisplay = mediaSizes[media]; 
     } 
    } 
    }

现在，我决定为得到它的工作的缘故media值设置为0。必须有一个更简单的方法来循环通过0，1，2 ...

来源

2015-02-07 Himmel

'var mediaDisplay'是'$ scope.mediaDisplay'（或者只是'mediaDisplay'，取决于'$ scope'是什么？）否则，'mediaDisplay'的值被限制在changeMedia函数中...... – Jack 2015-02-07 01:13:41

var mediaDisplay '不是真正的只要改变一切。 – Timmerz 2015-02-07 01:14:35

应该是$ scope。为了简单起见，我正在改变它，看起来是相反的。查看修改。 – Himmel 2015-02-07 01:15:20

惯用的伎俩递增要包装一个值周围是使用%运营商。对于递减，你只需要蛮力，并检查了负值：递增，因为它会机制保障0和operand - 1之间的值时

var mediaSizes = ['xs','md','lg']; 

    var media = 0; 

    $scope.mediaDisplay = mediaSizes[media]; 

    var changeMedia = function(direction) { 
     if (direction === 'up') { 
      media = ++media % mediaSizes.length; 
     } else { 
      if (--media < 0) media += mediaSizes.length; 
     } 
     $scope.mediaDisplay = mediaSizes[media]; 
    }

的%操作更是得心应手。因此，media % mediaSizes.length将始终是数组的合法索引，并且可以在您增加媒体时环绕它。

不幸的是，%运营商不会做你想要的负数，所以如果我们找到一个负数，我们必须做一些不同的事情。在这种情况下，我只是选择添加mediaSizes.length，这将导致-1环绕到最后一个索引。

仅供参考，请注意我使用的是mediaSizes.length而不是任何硬编码的常量，所以即使向阵列中添加了更多的mediaSizes，此代码也可以继续完美地工作。这是更强大的代码的原理之一，可自动处理其他地方的更改。

了代码的整洁，这可能是捕捉一个封闭一些变量来保持他们在全球范围内的一个好地方：

var changeMedia = (function() { 
     var mediaSizes = ['xs','md','lg']; 
     var media = 0; 
     $scope.mediaDisplay = mediaSizes[media]; 

     return function(direction) { 
      if (direction === 'up') { 
       media = ++media % mediaSizes.length; 
      } else { 
       if (--media < 0) media += mediaSizes.length; 
      } 
      $scope.mediaDisplay = mediaSizes[media]; 
     } 
})();

来源

2015-02-07 01:17:55 jfriend00

巧妙使用％。 – Himmel 2015-02-07 01:41:28

@Himmel - 你是否意识到，你可以upvote所有答案，提供有用的信息？而且，我假设你知道，如果你解决了你的问题，你可以/应该通过点击该答案左边的绿色复选标记来选择“最佳答案”。进一步[info]（http://stackoverflow.com/help/privileges/vote-up）onvoting。 – jfriend00 2015-02-07 02:05:43

我知道这一点，谢谢。我从计算机中拔出了一秒钟。但完全打算学习一些有用的模块使用经验教训，然后在我得到第二个时间的情况下进行“如果”然后“排序”。我想围绕你对暴力破解的解释，以及对ternery操作员的@alexpods解释。 – Himmel 2015-02-07 02:30:57

您的代码在多个方面不正确。

它不循环下来
你一定几率的范围mediaDisplay属性，而不是一些全局mediaDisplay对象。 UPD：已经修复
不正确的增量和递减。例如，如果当前media == 2和用户正在制作up方向，那么您正在递增该值（media ++），然后试图获得当然不存在的mediaSizes[3]。

使用此代码来代替：

var mediaSizes = ['xs','md','lg']; 

var media = 0; 

$scope.mediaDisplay = mediaSizes[media]; 

var changeMedia = function(direction) { 
    switch (direction) { 
     case 'up': 
      media = media === 2 ? 0 : media+1; 
      break; 
     case 'down': 
      media = media === 0 ? 2 : media-1; 
      break; 
    } 
    $scope.mediaDisplay = mediaSizes[media]; 
};

UPD 什么media = media === 2 ? 0 : media+1 - 这里我们使用ternary opertator。

首先检查是否media === 2.

如果true - 三元操作符返回0（我们必须设置media为零，因为不存在与指数== 3没有媒体）
如果false - 三元运算符返回值media+1值。

几乎为递减相同的逻辑，但在这种情况下，我们检查的media === 0而不是media === 2.

来源

2015-02-07 01:14:13 alexpods

这个完美的作品。你能解释一下'media = media === 2吗？ 0：媒体+ 1'行？ – Himmel 2015-02-07 01:31:14

@Himmel我加了小解释。希望它能帮助你。 – alexpods 2015-02-07 01:42:35

如何：

if (direction == 'up') { 
    media ++; 
    if(media > 2){ 
     media = 0; 
    } 
    var mediaDisplay = mediaSizes[media]; 
    } else { 
    media --; 
    if(media < 0){ 
     media = 2; 
    } 
    var mediaDisplay = mediaSizes[media]; 
    }

应该

来源

2015-02-07 01:20:35

骑自行车穿过Javascript Array

回答

相关问题