Question

我有一个div元素，使用jQuery作为刷新按钮。我想要做的是停止用户一直按下它。假设我想在接下来的15秒内禁用它。我怎样才能做到这一点？

HTML PART

<div class="am_outter_div">    
<div class="header">ΜΕΝΟΥ</div>
<div class="button_1">BACK</div>
<div class="button_2" id="am_refresh_button">REFRESH</div>
<div class="button_3">TOP</div>
<div class="button_4">NEXT</div>
</div><br><br>

<div id="av_refresh_div">Blah blah blah...</div>

JQUERY PART

var $JQ_ = jQuery.noConflict();
    $JQ_(document).ready(function(){
    $JQ_("#am_refresh_button").click(function(){
    $JQ_("#av_refresh_div").load("index.php #av_refresh_div").fadeOut(1000).fadeIn(1000);});
    });

JSFIDDLE here ...

Answer 1

你可以这样做：

var $JQ_ = jQuery.noConflict(), 
    $btbnRefresh = $JQ_("#am_refresh_button");

 function refreshBind(){     

     $btbnRefresh.on("click",function(){

    // after once click unbind click handler
    $JQ_(this).off("click");

    //show div fade
    $JQ_("#av_refresh_div").load("index.php #av_refresh_div").fadeOut(1000).fadeIn(1000); 

        // after some time re-bind again onclick
        setTimeout(function(){
            $btbnRefresh.on("click",refreshBind);
        },10000);

    });     
}

refreshBind();

在这里工作小提琴：http://jsfiddle.net/ZdFkf/5/

我希望它有所帮助。

Answer 2

您可以执行以下操作：

点击时禁用您的div
设置超时，将在x秒后重新激活您的div

试试这个：

$("#am_refresh_button").click(function(){
    if($(this).attr("disabled") != "disabled")
    {
        $("#av_refresh_div").attr("disabled", "disabled");
        $("#av_refresh_div").load("index.php #av_refresh_div").fadeOut(1000).fadeIn(1000);
    }

    setTimeout(function() {
        $("#av_refresh_div").removeAttr("disabled");
    }, 10000); // <-- your time (10 sec atm)
});

Answer 3

您可以取消绑定click事件，然后设置超时以在15秒后重新绑定它。或者在元素上设置一个变量，以指示它是否已启用：

var $JQ_ = jQuery.noConflict();
$JQ_("#av_refresh_div").data("isEnabled", true);

$JQ_(document).ready(function(){
    $JQ_("#am_refresh_button").click(function(){
        if ($JQ_("#av_refresh_div").data("isEnabled")) { 
            $JQ_("#av_refresh_div").data("isEnabled", false);             
            $JQ_("#av_refresh_div").load("index.php#av_refresh_div").fadeOut(1000).fadeIn(1000);
            setTimeout(function() {
                $JQ_("#av_refresh_div").data("isEnabled", true); 
            }, 15000);
        }
    });
});

但是你可能最好使用实际的HTML button，然后你可以做同样但实际的禁用/启用它们（所以它们看起来是灰色的），这会给用户反馈的东西是发生。而且它们显然是可点击的（但是我猜你的div也会在它们被设置样式时出现，在这种情况下你可能想要添加/删除一个类来表示可点击性是一种可见的方式）。

Answer 4

$JQ_("#am_refresh_button").click(function(){
    //Disable logic goes here
    setTimeOut(function(){
        //Enable the dive here
    },yourDelay);
});

您可以添加任意数量的时间。时间通常以毫秒为单位。

或

var divEnabled = true;
$JQ_("#am_refresh_button").click(function(){
    if(!divEnabled)
       return;
    divEnabled = false;
    setTimeOut(function(){
        divEnabled = true;
    },yourDelay);
});

禁用下一个x秒的div元素

4 个答案: