0

当尝试非常快速地单击选项卡时，两个选项卡在 Jquery SmartWizard.js 插件中被选中，我尝试了这种方式，但没有运气，任何人都经历过这个......并且也尝试了.on /.off没有运气的事件。

$($this.steps).bind("click", function (e) {

    //e.stopImmediatePropagation();       
    $($this.steps).unbind("click");

    if ($this.steps.index(this) == $this.curStepIdx) {

        return false;
    }
    var nextStepIdx = $this.steps.index(this);
    var isDone = $this.steps.eq(nextStepIdx).attr("isDone") - 0;
    if (isDone == 1) {
        _loadContent($this, nextStepIdx);
    }

    $($this.steps).bind("click");
    return false;
});
4

5 回答 5

0

也许设置一个全局变量并检查全局变量是否为真？您可以使用内置的 javascript delay() 函数在单击后的很短的时间内设置一个短暂的延迟。例如，

go=true;
onclick:
    go=false;
    delay(100, some filler event);
    go=true;

编辑：此链接可能会有所帮助：http ://ejohn.org/blog/how-javascript-timers-work/

编辑：在 jQuery 中试试这个：

$('id').click(function() {return false;});

然后设置一个延迟并将其设置回来。

编辑：这似乎对我有用。请注意，如果您单击链接两次并稍有延迟，它只会闪烁一次。除非您非常快速地向该按钮发送大约 10 次垃圾邮件，否则它可以正常工作。（使用最新的 Chrome 顺便说一句）

编辑： http: //jsfiddle.net/ZDHZv/2/对我来说很好。如果您将该方法用于选项卡，则不可能获得双重选择。使用您使用的任何插件来实现它$('.selected')

于 2013-08-05T09:27:29.577 回答
0

我通常会这样做：

var selection;
$('a').click(function () {
    if (selection !== undefined) {
        selection.removeClass('selected');
    }
    selection = $(this);
    selection.addClass('selected');
});

http://jsfiddle.net/ZDHZv/7/

但我想到你也可以这样做，假设所有选项卡都是兄弟姐妹，没有别的：

$('a').click(function () {
    $(this).addClass('selected');
    $(this).siblings().removeClass('selected');
});

http://jsfiddle.net/ZDHZv/9/

于 2013-08-07T20:48:05.170 回答
0

你可以尝试这样的事情：

var process = false;
$($this.steps).bind("click", function (e) {
    if (process) {
        return false;
    }
    process = true; 

    if ($this.steps.index(this) == $this.curStepIdx) {

        return false;
    }
    var nextStepIdx = $this.steps.index(this);
    var isDone = $this.steps.eq(nextStepIdx).attr("isDone") - 0;
    if (isDone == 1) {
        _loadContent($this, nextStepIdx);
    }
    process = false;
    return false;
});
于 2013-08-11T17:40:13.667 回答
0

在我阅读了您的 400 多行源代码之后，我想我知道问题出在哪里了。

它在函数_loadContent 中。由于ajax，内容加载是异步的，并且您在ajax加载后设置selected。

因此，在加载前一个选项卡时可以选择下一个选项卡，尽管它的单击完成。

我给你两个答案。

  1. 使ajax同步。喜欢

    var ajax_args = {
    ...
    async : false,
    ...

    它可以保证selected和all的顺序。但是，如您所知，它也会迫使用户等待内容加载完成。

  2. 立即设置选中，之后设置错误样式。 喜欢

    ...
var stepNum = stepIdx + 1;
_showStep($this, stepIdx);// add this to set selected immediately.
if (ajaxurl && ajaxurl.length > 0) {
    if ($this.options.contentCache && hasContent) {
        return; // remove this and other _showStep calls.
    } else {
        var ajax_args = {
            ...
            error : function() {
                $this.loader.hide();
                $this.showError(stepIdx);// show error.
            },
            ...

    选择的顺序就可以了。但是ajax加载和错误样式会变成异步的。

这是你的电话。

于 2013-08-12T02:21:23.303 回答
0

嗨，谢谢你的努力，我通过使用 UI 块插件阻止 UI 解决了这个问题

$($this.steps).on("click", function (e) {

    e.preventDefault();
    e.stopImmediatePropagation();
    if ($(this).attr('class') !== 'disabled' && $(this).attr('class') !== 'selected' && $(this).attr('class') !== 'error') {

        $('div.swMain').block({ message: "Processing..." });
    }

    try {

        if ($this.steps.index(this) == $this.curStepIdx) {

            $('div.swMain').unblock();
            return false;
        }

        var nextStepIdx = $this.steps.index(this);
        var isDone = $this.steps.eq(nextStepIdx).attr("isDone") - 0;
        if (isDone == 1) {           
            e.preventDefault();
            _loadContent($this, nextStepIdx);

        }
    }
    catch (e) {

        $($this.steps).on("click");
        console.log("Fast click Error ===>   " + e);
    }


    if ($(this).attr('class') !== 'disabled' && $(this).attr('class') !== 'selected' && $(this).attr('class') !== 'error') {

        $('div.swMain').unblock();
    }

    return false;
});
于 2013-08-12T05:47:01.787 回答