1

我有一个删除按钮来删除照片。第一次单击div会在顶部显示一条动画消息：“如果您真的想删除这张照片，请再次单击。” 第二次单击将删除照片。如果您在第一次单击后 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

所以我编辑它并且它有效

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