javascript - jQuery 列表 : how to?

Question

我有一个包含单元格的表格，用户可以在其中单击一次。这效果非常好。

我的代码如下所示:总结一下:当用户单击某个单元格时，我会淡出具有特殊属性data-toshoot的所有单元格(并且总是只有一个这样的单元格):

td.css({
    'cursor': 'pointer'
})
.click(function() {
    var c = self.getShoot(undefined); /* undefined = no shoot */
    $('table#user td[data-to-shoot=1]').each(function() {
        var fadeIn  = $(this).data('fade-in');
        $(this)
            .removeAttr('data-to-shoot')
            .html(c)
            .stop()
            .data('fading', true)
            .animate({
                backgroundColor: fadeIn
            }, 1000, function() {
                $(this)
                    .data('fading', false)
                    .hover(
                        self.hoverOnlyEmptyCellsIn,
                        self.hoverOnlyEmptyCellsOut
                    );
            });
    });

现在我想让用户以 FIFO 方式多次单击(预定义变量):例如，如果允许他“选择”3 个单元格，他可以单击 3 次，第 4 次，我希望第一个单元格淡出，新单元格淡入。

如何实现这个？有什么伟大的想法吗？

Answer 1

您可以将单击的元素存储在变量中，然后在选择允许的单击元素的最大数量时将第一个元素移出数组，如下所示:

var MAX_SELECTIONS = 3;
var selectedArray = new Array();

$('.cell').click(function() {
    if(!$(this).hasClass('selected')) {
        $(this).addClass('selected');
        selectedArray.push($(this));
        if(selectedArray.length > MAX_SELECTIONS){
            selectedArray[0].removeClass('selected');
            selectedArray.shift();
        }
    }
});

在这里摆弄 - http://jsfiddle.net/ackerman/DNLY8/