Question

我有一些使用Javascript和Mootools创建的标签，我的客户希望禁用页面底部的“下一个按钮”，直到标签被读取（点击）。该页面是动态的（使用PHP和MySQL创建），可能有两个或三个选项卡，具体取决于设置。我今天在努力想到最好的解决方案。

任何帮助超过欢迎...

Answer 1

由于选项卡的数量是动态的，我可能会在选项卡的标题/标签/上使用一个属性，表示它已经未被读取，然后当选项卡的标题/标签/时无论点击什么，我都会更改该属性以指示已已被读取，然后触发一个可启用该按钮的功能，具体取决于是否已读取所有其他标签。

我不是MooTools的人，但是IIRC它是Prototype的一个分支（虽然它已经有一段时间了但它们可能已经分歧了）。点击处理程序在Prototype中看起来像这样：

$$('.tabClass').invoke('observe', 'click', function(event) {
    this.setAttribute("data-read", "Y");
    if ($$('.tabClass[data-read=N]').length == 0) {
        $('buttonId').disabled = false;
    }
});

...其中$$是Prototype的“搜索DOM以查找与此CSS选择器匹配的元素”函数，而$是Prototype的“让我获取具有此ID的元素”。 invoke只为每个匹配元素调用observe（您可以使用事件委派来执行此操作），我认为observe是不言而喻的。： - ）

上面的代码做出了以下假设：

您的标签标题或任何具有“tabClass”类的内容。
您已创建表格，其中“data-read”属性设置为“N”（例如<div class="tabClass" data=read="N">或类似）。 data-前缀是HTML5友好的。（是的，如果我们想要，我们最终可以在元素上添加任意旧的任意属性名称！我们只需要在data-前加上它们。）
该按钮具有ID“buttonId”
按钮开始关闭

修改或者如果您愿意，可以使用标记类，所有标签都以class="tabClass unread"开头：

$$('.tabClass').invoke('observe', 'click', function(event) {
    this.removeClassName("unread");
    if ($$('.tabClass.unread').length == 0) {
        $('buttonId').disabled = false;
    }
});

仔细检查MooTools是否支持“.tabClass.unread”选择器（我应该这样做，我只是说，检查）。对于基于类的选择器，某些实现可以比基于属性的选择器更快地工作。

Answer 2

查看jsfiddle的示例： http://www.jsfiddle.net/dimitar/THMxa/

它可以使用一些类和逻辑添加到标签点击和下一次点击。

// fade out next button and set it to disabled, then define the event to check state.
document.id("next").store("disabled", true).set("opacity", .5).addEvent("click", function() {
    if (this.retrieve("disabled")) {
        alert("please view all tabs first!");
        // console.log(document.getElement("div.notclicked"));
        return;
    }
    // insert code here that goes next.
    alert("allowed to run");
});

// this is pseudo - you probably already have a function that assigns events on your tabs to change
document.getElements("div.tabs").each(function(tab) {
    // first tab may already be open so no click needed
    if (!tab.hasClass("clicked"))
        tab.addClass("notclicked");

    // add click event
    tab.addEvent("click", function() {
        if (document.getElement("div.notclicked"))
            this.addClass("clicked").removeClass("notclicked");
        // check again if that was the last one, if so, enable next button...
        if (!document.getElement("div.notclicked"))
            document.id("next").store("disabled", false).fade("in"); // or whatever

        // regular code for tabs here...
    });
});

Answer 3

您应该禁用发送加载内容请求的按钮，并从处理返回内容的回调中启用它。

Answer 4

我会在点击标签时向标签添加一个类 - 比如“点击”。另外，检查“点击”是否是最后一个标签，所以..

$（'myElement'）。set（'class'，'clicked'）;

然后获取所有标签元素（我假设的元素）并计算它们。然后使用“clicked”类获取所有tab元素

如果匹配，则全部“点击”。

禁用按钮，直到读取选项卡

4 个答案: