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的最后一项上添加一个额外的课程（＆＃34;最后一次＆＃34;）是我的下一个挑战。：）

Answer 1

我只想建立在cgatian的答案上，因为我对这个概念也很感兴趣。我最终从他的jsfiddle制作了两个不同的叉子。 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" : "");
    });
});

它将所有元素存储在全局变量中，然后将它们从最小数据索引排序到最高数据索引。这很棒，因为它提供了很大的灵活性。什么是第一个或最后一个数据索引并不重要，如果你跳过一些数字甚至没关系。最重要的是，您可以通过在排序功能中将a更改为b和b来轻松更改顺序，这样可以提高速度。单击时也无需查找任何元素。 Jsfiddle为第二个。

Answer 2

听起来你正在创建某种类型的DOM捉迷藏游戏。我认为下面的内容会有效，而且它也可以获得奖金。

$('.foo').click(function(event)
{
    var target = $(event.target);
    var index = target.data('index');

    var nextDiv = $('[data-index="' + (index + 1) + '"]');
    var lastDiv = $('[data-index="' + (index + 2) + '"]');

    nextDiv.removeClass('hidden');

    if(lastDiv.length === 0)
    {
        nextDiv.addClass('last');
    }
});

查看下面的jsFiddle，让我知道这是否适合你。

http://jsfiddle.net/VW5x9/

单击一个后显示元素

2 个答案: