Question

我有一个包含2个数组up和down的对象，这些值应该与向上和向下键相关联，勾选你应该在up数组中移动，如果你勾选你应该通过任何up刻度值（如果up刻度已发生）到down数组，反之亦然。

我设法创建了这个版本，但遇到了一些问题undefined我认为是上下之间的交叉点。有人可能会就如何使其更加健壮并解决undefined问题向我提供一些建议吗？我应该从-1开始为我的柜台或者该方法应该是什么？

JS

var prices = {
    "up" : [
      {"r": 10.25, "f" : "10.25"},
      {"r": 10.50, "f" : "10.50"},
      {"r": 10.75, "f" : "10.75"},
      {"r": 11.00, "f" : "11.00"},
      {"r": 11.25, "f" : "11.25"},
      {"r": 11.50, "f" : "11.50"},
      {"r": 11.75, "f" : "11.75"},
      {"r": 12.00, "f" : "12.00"},
      {"r": 12.25, "f" : "12.25"},
      {"r": 12.50, "f" : "12.50"}
    ],
    "down": [
        {"r": 7.50, "f" : "7.50"},
        {"r": 7.75, "f" : "7.75"},
        {"r": 8.00, "f" : "8.00"},
        {"r": 8.25, "f" : "8.25"},
        {"r": 8.50, "f" : "8.50"},
        {"r": 8.75, "f" : "8.75"},
        {"r": 9.00, "f" : "9.00"},
        {"r": 9.25, "f" : "9.25"},
        {"r": 9.50, "f" : "9.50"},
        {"r": 9.75, "f" : "9.75"} 
    ]
};

var $btns = $('.js-btn');
var counter = -1;

$btns.on('click', function(event) {
    var dir = $(event.currentTarget).data('dir');

    if(dir === 'up') {
        if(counter >= -1) {
            console.log(prices[dir][++counter]);
        } else {
            console.log(prices['down'][prices['down'].length + counter++]);
        }   
    }

    if(dir === 'down') {
        if(counter <= -1) {
            console.log(prices[dir][prices[dir].length + counter--]);
        } else {
            console.log(prices['up'][--counter]);
        }

    }
});

JS小提琴http://jsfiddle.net/kyllle/7Lznj00w/

Answer 1

为了确保您的数组访问有效，您希望数组索引在[0, arr.length-1]范围内。如果您尝试以无效索引访问JavaScript数组，则会得到未定义。

您可以将upIndex和downIndex初始化为0（列表中的第一个元素）。现在假设你想要up数组中的下一个元素。您可以按如下方式更新upIndex

upIndex = (upIndex + 1) % prices.up.length

%运算符会在除法后给出余数（因此3 % 2为1，因为3/2会留下1的余数。因此，如果您已经位于up的最后一个索引，那么它将在开始时启动您。 up中的最后一个索引是9，up.length是10，所以upIndex = (9 + 1) % 10 = 0，确保你始终保持在数组的范围内。

Answer 2

console.clear();

var prices = {
    "up" : [
      {"r": 10.25, "f" : "10.25"},
      {"r": 10.50, "f" : "10.50"},
      {"r": 10.75, "f" : "10.75"},
      {"r": 11.00, "f" : "11.00"},
      {"r": 11.25, "f" : "11.25"},
      {"r": 11.50, "f" : "11.50"},
      {"r": 11.75, "f" : "11.75"},
      {"r": 12.00, "f" : "12.00"},
      {"r": 12.25, "f" : "12.25"},
      {"r": 12.50, "f" : "12.50"}
    ],
    "down": [
    	{"r": 7.50, "f" : "7.50"},
        {"r": 7.75, "f" : "7.75"},
        {"r": 8.00, "f" : "8.00"},
        {"r": 8.25, "f" : "8.25"},
        {"r": 8.50, "f" : "8.50"},
        {"r": 8.75, "f" : "8.75"},
        {"r": 9.00, "f" : "9.00"},
        {"r": 9.25, "f" : "9.25"},
        {"r": 9.50, "f" : "9.50"},
        {"r": 9.75, "f" : "9.75"} 
    ]
};

var $btns = $('.js-btn');
var counter = -1;

$btns.on('click', function(event) {
    var dir = $(event.currentTarget).data('dir');
    
    if(dir === 'up') {
/*use return; to stop or reset counter = -1 | 0*/
if(!prices[dir][counter+1])return;
         counter++;
        if(counter >= -1) {
            console.log(prices[dir][counter]);
        } else {
        	console.log(prices['down'][prices['down'].length + counter]);
        }   
    }
    
    if(dir === 'down') {
/*use return; to stop or reset counter = -1 | 0*/
if(!prices[dir][counter-1])return;
        counter--;
        if(counter <= -1) {
            console.log(prices[dir][prices[dir].length + counter]);
        } else {
            console.log(prices['up'][counter]);
        }
        
    }
});

* {
  -webkit-font-smoothing: antialiased;
}

body {
    padding: 5%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <button class="btn btn-success btn-block  js-btn" data-dir="up">Up</button>
    <button class="btn btn-danger btn-block  js-btn" data-dir="down">Down</button>
</div>

Inc / dec逻辑用于遍历多个数组值并在数组中存储位置

2 个答案: