Question

我有5个div类（button1，button2，button3，button4，button5）

我想要的是所有类都不是可点击的onload（除了button1），然后在点击button1后，button2处于活动状态而其他类没有，依此类推。

顺序点击各种各样。

HTML

select *
from 
(
select SiteID, tDate, tTime, (CASE WHEN IsNumeric(tMI)=1 then cast(tMI as float) ELSE null END) AS value
from Raw_Data
) src
pivot
(
  max(value)
  for SiteID in ([CA0021], [CA0022], [CA0059])
) piv
where 
(tDate>='20151201' and tDate<='20151205') 
order by tDate

我试过了：

<map name="Map" id="Map"> 
  <area id="button" title="HAT" alt="HAT" href="#" shape="poly" coords="xxx,xxx" /> 
  <area id="button2" title="SUN CREAM" alt="SUN CREAM" href="#" shape="poly" coords="xxx,xxx" /> 
</map>

作为初始函数，然后在button1下单击功能：

$(function(){ $("#button2").unbind("click"); });

这是因为它不允许点击button2，但即使点击了button1，它仍然无法点击。

有什么想法吗？

Answer 1

您需要执行Document

＆＃13;

Episodes

＆＃13;

$(document).ready(function(){
    $(".btn").unbind("click",function(){
      alert("unbind click");
    });
  
});

function btnClick(thisObj){
    //unbind all not current
     $(".btn").not(thisObj).unbind("click");
     //bind next btn
     $(thisObj).next().bind("click",function(){
      alert("bind click");
    });
}

＆＃13;

Answer 2

试试这个：你可以禁用点击的按钮并启用下一个按钮，见下面的代码

$(document).ready(function(){
    $('#Map').find('area').not('#button').attr('disabled',true);
    $('#Map area').on("click",function(){
        $(this).attr('disabled',true);
        $(this).next('area').removeAttr('disabled');
    }); 
});

Answer 3

在更通用和建设性的方法中，实现jQuery插件：

$("#button1").sequence("click")
    .handle(function () {
        alert("YOU...")
    })
    .handleNext("#button2", function () {
        alert("SHALL...")
    })
    .handleNext("#button3", function () {
        if (prompt("NOT PASS!!!") != "I'm Frodo, drunkie!") {
            alert("BZZZZZZZT!");
            return this.runBackward();
        }
        alert("Ah, oh, okaay...");
    })
    .handleNext("#button4", function () {
        alert("Pwned! ]:-}");
        this.resetSequence();
    });

$(function () {
    $("#button1").sequence("click")
        .handle(function () {
            alert("YOU...")
        })
        .handleNext("#button2", function () {
            alert("SHALL...")
        })
        .handleNext("#button3", function () {
            if (prompt("NOT PASS!!!") != "I'm Frodo, drunkie!") {
                alert("BZZZZZZZT!");
                return this.runBackward();
            }
            alert("Ah, oh, okaay...");
        })
        .handleNext("#button4", function () {
            alert("Pwned! ]:-}");
            this.resetSequence();
        });

});

(function ($) {
    $.fn.sequence = function (event) {
        this.sequencer = {
            event: event,
            plugged: this,
            disable : function (element, enable) {
                $(element).attr("disabled", (enable !== false) ? "disabled" : false);
            },
            disablePrev: function (enable) {
                if (this.prevInSequence)
                    this.disable(this.prevInSequence, enable);
            },
            disableNext: function (enable) {
                if (this.nextInSequence)
                    this.disable(this.nextInSequence, enable);
            },
            hasPrev : function (prev) {
                this.prevInSequence = prev;
            },
            hasNext : function (next) {
                this.nextInSequence = next;
                this.plugged.resetSequence();
            },
            process : function (callback, event) {
                this.disablePrev();
                if (callback.call(this.plugged, event) === false)
                    return;
                this.disable(this.plugged);
                this.disableNext(false);
            },
            reset: function () {
                this.disablePrev(false);
                if (this.nextInSequence)
                    this.nextInSequence.sequencer.reset();
                this.disable(this.plugged);
            }
        };

        this.resetSequence = function () {
            this.sequencer.disable(this, false);
            this.sequencer.disableNext(this);

            if (this.sequencer.prevInSequence)
                this.sequencer.prevInSequence.resetSequence();
        }

       this.handle = function (callback) {
            var self = this;
            this.on(this.sequencer.event, function (e) {
                if (self.attr("disabled"))
                    return;
                self.sequencer.process.call(self.sequencer, callback, e);
            });
            return this;
        }
        this.handleNext = function (selector, callback) {
            var next = $(selector);
            var sequence = next.sequence(this.sequencer.event).handle(callback);
            this.sequencer.hasNext(next);
            sequence.sequencer.hasPrev(this);
            return sequence;
        }
        this.runBackward = function () {
            this.sequencer.reset();
            return false;
        }

        return this;
    }
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

  <button id="button1">1</button>
  <button id="button2">2</button>
  <button id="button3">3</button>
  <button id="button4">Finish</button>

顺序解绑/绑定单击

3 个答案: