1

写真を削除するための削除ボタンがあります。div最初のクリックは、 「この写真を本当に削除したい場合は、もう一度クリックしてください」というメッセージで上部をアニメーション化します。2回クリックすると、写真が削除されます。最初のクリックから3秒以内に再度クリックしないと、メッセージは消えます。ただし、それが消えてボタンをもう一度クリックすると、削除されたままになります。メッセージが消えたらスクリプトを停止して投稿を停止する必要があります$.ajax()

$(".delete").toggle(function(){
    $("#top").html("Click again if you really want delete this photo.");
    $("#top").animate({top: "0"}).delay(3000).animate({top: "-50"});
    return false;
}, function() {
    $("#top").animate({top: "-50px"});
    var id = $(this).attr("id");
        $.ajax({
           ...
        });
});
4

5 に答える 5

4

このようなもの（テストされていない）：

$(".delete").click(function()
{
    if ($(this).attr('canDelete') == 'y')
    {
        $("#top").animate({top: "-50px"});
        ... do delete
    }
    else
    {
        $("#top").html("Click again if you really want delete this photo.");
        $("#top").attr('canDelete', 'y')
                 .animate({top: "0"})
                 .delay(3000)
                 .attr('canDelete', 'n')
                 .animate({top: "-50"});
    }
});
于 2012-07-18T12:12:30.680 に答える
3

このようなことをしてみませんか？

$(".delete").click(function() {
    if ( $(this).hasClass("confirm") ) {

        //When the button is clicked again within 3 seconds it will have
        //the confirm class and will go here

    } else {

        //The button will go here when clicked first time, a class
        //of confirm is added for 3 seconds.
        $(this).addClass("confirm");
        setTimeout(function() {
            $(this).removeClass("confirm");
        }, 3000);

    }
});
于 2012-07-18T12:11:59.593 に答える
1

次のように、クロージャーに変数を入れることができます。

var allowDel;
$(".delete").toggle(function(){
    allowDel = true;
    $("#top").html("Click again if you really want delete this photo.");
    $("#top").animate({top: "0"}).delay(3000).animate({top: "-50"});
    setTimeout(function() { allowDel = false; }, 3000);
    return false;
}, function(){
    if (!allowDel) return;
    $("#top").animate({top: "-50px"});
    var id = $(this).attr("id");
        $.ajax({
           ...
        });
});
于 2012-07-18T12:17:32.040 に答える
0

別の解決策、今回は追加の変数または属性/プロパティなし（重要な利点があるわけではなく、少しきれいかもしれません）。これは、メッセージDIVのY座標を使用して、削除を許可するかどうかを決定します。

デモ： http： //jsfiddle.net/Eu2vu/

コード：

$(".delete").click(function() {
    var top = $('#top');
    if (top.position().top >= 0) {
        top.animate({top: "-50px"});
        console.log('do delete');
    }
    else {
        top.html("Click again if you really want delete this photo.");
        top.animate({top: "0"}).delay(3000).animate({top: "-50"});
    }
});
于 2012-07-18T12:24:14.370 に答える
0

だから私はそれを編集し、それは動作します

var allowDel;
$(".delete").click(function(){
   if(allowDel){
       $.ajax();
       allowDel = false;
   }else{
       allowDel = true;
       setTimeout(function() {
           $("#top").slideUp();
       }, 3000);
       return false;
   }
});
于 2012-07-18T12:36:45.010 に答える