-1

jQueryを使用して更新ボタンとして機能するdiv要素があります。私がやりたいのは、ユーザーが常にそれを押すのを止めることです。次の 15 秒間は無効にしたいとしましょう。どうやってやるの？

HTML 部分

<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>

Jクエリ部分

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 ...

4

4 に答える 4

3

あなたはこれを行うことができます：

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/

役立つことを願っています。

于 2013-09-08T11:54:29.347 に答える
1

次のことができます。

  1. クリックされたときにdivを無効にする
  2. タイムアウトを設定すると、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)
});
于 2013-09-08T11:44:20.707 に答える
0

クリック イベントのバインドを解除し、タイムアウトを設定して 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もそうなると思います。その場合、クリック可能性が目に見える方法であることを示すためにクラスを追加/削除する必要があるかもしれません）。

于 2013-09-08T11:47:08.863 に答える
0 
$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);
});
于 2013-09-08T11:47:45.853 に答える