0

我试图将列表中的第 1 个 div 设置为 box2、2nd 和 3rd，设置为 box，将第 4 个设置为 box3，然后重复框 1 到 4。

好奇是否有更短的方法来使用柜台。

jQuery(document).ready(function($) {
var repos = $('#repositories');
var username = 'username';
var count = 0;
$.getJSON('http://github.com/api/v2/json/repos/show/' + username + '?callback=?',      function(data, status) {
    $.each(data.repositories.reverse(), function() {
        if (this.name != username + '.github.com') {
            count++;
            if (count == 1) {
                var boxes = 'box2';
            } else if (count == 4) {
                var boxes = 'box3';
                count = 0;
            } else {
                var boxes = 'box';
            }
            line = $('<div class="' + boxes + '"> <h3>' + this.name + '</h3> <p>' + this.description + '</p> <p><a href="' + this.url + '">more...</a></p> </div>').hide();
            $(repos).append(line);
            $(line).fadeIn(500);
        }
      });
  });
4

3 回答 3

1

你可以使用这样的行：

var boxes = (count == 1) ? 'box2' : (count == 4) ? 'box3' : 'box';
count = (count == 4) ? 0 : count + 1;
于 2012-01-24T00:01:49.830 回答
1

count除非它等于零，否则您似乎正在从变量的实际值中删除一个？如果是这种情况，那么您可以这样做：

var boxes = (count === 0) ? 'box' : 'box' + (count - 1);

count要每四个重复一次，如果变量大于四个，只需重置变量：

count++;
if (count > 4) {
    count = 1;
}

这是您的代码的编辑版本：

jQuery(document).ready(function($) {
    var $repos    = $('#repositories'),
        username  = 'username',
        count     = 0;
    $.getJSON('http://github.com/api/v2/json/repos/show/' + username + '?callback=?',      function(data, status) {
        var output = [];
        data.repositories = data.repositories.reverse();
        for (var i = 0, len = data.repositories.length; i < len; i++) {
            if (data.repositories[i].name != username + '.github.com') {
                count++;
                if (count > 4) {
                    count = 1;
                }
                var boxes = (count === 0) ? 'box' : 'box' + (count - 1);
                output[output.length] = '<div class="' + boxes + '"> <h3>' + data.repositories[i].name + '</h3> <p>' + data.repositories[i].description + '</p> <p><a href="' + data.repositories[i].url + '">more...</a></p> </div>';
            }
        }
        var $line = output.join('').hide();
        $repos.append($line);
        $line.fadeIn(500);
    });
});
于 2012-01-24T00:04:50.947 回答
1

您可能正在寻找的是模数。

count = ( count + 1 ) % 5;

现在 count 不是无限增长，而是序列 0、1、2、3、4、0、1、2、3、4 等

你的盒子类似乎有点奇怪，有count = 0, 'count = 2' 和count = 3所有结果"box"。假设这不是错误，我可能会这样写：

classes = ['box', 'box2', 'box', 'box', 'box3'];
boxes = classes[count];

这种方式对我来说更具可读性，并且可以根据需要轻松调整逻辑。

于 2012-01-24T00:20:32.373 回答