Question

我使用下面的代码只显示数组中的前3项作为默认值

//Hides all but first 3 items in the array
@$('.question_container')[3..-1].hide()

现在，我想在单击按钮时显示数组中的下3个项目，然后再次单击按钮时显示后续3个项目（并重复）。

目前，我只能使用以下代码

显示数组中的所有剩余项目

showMoreQuestions: (e) ->
    e.preventDefault()
    @$('.question_container')[3..-1].show()
    false

如何修改上面的代码，以便在单击按钮时只显示3个项目？

Answer 1

我在这里猜测，但是如果你刚刚选择了隐藏的那些，理论上你应该能够每次显示前3个并让它工作。

showMoreQuestions: (e) ->
    e.preventDefault()
    @$('.question_container:hidden')[0..2].show()
    false

Answer 2

我不确定你正在寻找什么样的行为，但也许这样的事情可以解决这个问题：

showMoreQuestions: (e) ->
    e.preventDefault()
    first = @$('.question_container:visible').length - 1
    @$('.question_container')[first .. first+3].show()
    false

您只需要查看当前可见的数量，并使用它来构建show的切片。每次拨打showMoreQuestions时，这将显示三个。

演示：http://jsfiddle.net/ambiguous/Ybz8h/

如果你想一次只显示三个（而不是一次显示三个），那么就像这样：

showMoreQuestions: (e) ->
    @offset ?= 3
    e.preventDefault()
    $('.question_container')[@offset - 3 .. @offset    ].hide()
    $('.question_container')[@offset     .. @offset + 2].show()
    @offset += 3
    false

演示：http://jsfiddle.net/ambiguous/r8Hhb/

每次单击按钮时如何在数组中显示3个项目

2 个答案: