javascript - 单击一个元素后显示元素

Question

假设有一组这样的 div:

<div class="foo" data-index="1">bar one</div>
<div class="foo hidden" data-index="3">bar three</div>
<div class="foo hidden" data-index="4">bar four</div>
<div class="foo hidden" data-index="2">bar two</div>

单击一个索引元素后，如何删除下一个索引元素上的隐藏类。所以基本上有一个可见的 div，然后用户单击并出现下一个 div，依此类推。

我可以很容易地循环它们，但我无法降低点击延迟。

var obj;

obj = $("div[data-index]").sort(function(a, b) {
  $(a).data("index") - $(b).data("index");
});

$.each(obj, function() {
  console.log($(this).data('index'));
  //WAIT FOR A CLICK ON THIS
  $(this).toggleClass("hidden");
});

...但我想在每次传递时暂停并等待用户点击。

奖励:在 obj 中的最后一个项目上添加一个额外的类(“last”)是我的下一个挑战。:)

Answer 1

我只是想以 cgatian 的答案为基础，因为我也对这个概念感兴趣。我最终用他的jsfiddle制作了两个不同的 fork 。 first one将当前数据索引存储在全局变量中，并在每次单击时递增它。它并不太令人印象深刻，甚至可能比原来的答案更糟糕。然而，我的第二次尝试更加成功。这是第二次尝试的代码:

$(document).ready(function() {
    var elements = $("[data-index]");
    elements.splice(0, 1);
    elements.sort(function (a, b) {
        return $(a).attr("data-index") - $(b).attr("data-index");
    });

    $(".foo").click(function (event) {
        $(elements.splice(0, 1)).removeClass("hidden").addClass(elements.length == 0 ? "last" : "");
    });
});

它将所有元素存储在全局变量中，然后按数据索引从最小到最高的顺序对它们进行排序。这很棒，因为它提供了很大的灵 active 。第一个或最后一个数据索引是什么并不重要，甚至跳过中间的一些数字也没关系。最重要的是，您可以通过在排序函数中将 a 更改为 b 并将 b 更改为 a 来轻松更改反向顺序，这应该会带来非常轻微的速度提升。单击时您也不必查找任何元素。 Jsfiddle对于第二个。