1

我有以下html：

<div class="modify">
    <a href="#" class="change" id="1">Change</a><br>
    <a href="#" class="delete" id="1">Delete</a>
</div>

还有一个相应的jQuery：

$(".delete").click(function(){

    var parent_element = $(this).closest('li');
    var url_string = $(this).attr('id') + '/delete/';

    $.ajax({
        type: 'POST',
        url: url_string,
        success: function(response) {
        parent_element.fadeOut(600, function() {
                parent_element.remove();
            });
        }
    });
});

现在我想要求用户在.modify. 当前内容应该消失并换成以下.change内容：.delete

你确定吗？

是 否

一般情况下是这样的：

初始状态

如果用户按下删除，内容应该改变如下：

按下 Delete 后的状态。

正如您可能已经想到的那样，如果用户选择

  • 是的，parent_element应该删除
  • 不，.modify应该回到原来的状态

这样做的惯用方法是什么？

4

2 回答 2

2

在您的附加说明之后，我修改了我的答案。

codepen 实例

关于什么..

HTML

<div class="modify askState">
  <div class="ask">
    <a href="#" class="change" id="1">Change</a><br>
    <a href="#" class="delete" id="1">Delete</a>
  </div>
  <div class="confirm">
    <span class="confirmDeleteText">Are you sure?</span><br/>
    <a href="#" class="confirm confirmYes">Yes</a>
    <a href="#" class="confirm confirmNo">No</a>
  </div>
</div>

JS

var askState = true, modifyElement = $(".modify");

$(".delete").click(function(){

  askConfirmation();    
});

function askConfirmation() {
  toggleState();
}

$(".confirmYes").click(function() {
  var parent_element = $(this).closest('li');
    var url_string = $(this).attr('id') + '/delete/';

    $.ajax({
        type: 'POST',
        url: url_string,
        success: function(response) {
        parent_element.fadeOut(600, function() {
                parent_element.remove();
            });
        }
    });
});


$(".confirmNo").click(function() {
  toggleState();
});

function toggleState() {
  if( askState ) {
    modifyElement.  addClass("confirmState").removeClass("askState");
  } else {
    modifyElement.removeClass("confirmState").  addClass("askState");
  }
  askState = !askState;
}

CSS

.confirmState .ask {
  display: none;
}

.askState .confirm {
 display: none;
}

我添加了 HTML，这样原始文本就不会丢失（如果你这样做了，innerHTML=newText那么如果不备份就无法正确恢复它的 innerHTML）。

另请注意，它的可读性很强：

  1. 如果我单击“删除”，然后单击确认（语义代码）。
  2. 如果我要求确认，然后更改状态（功能代码，本来可以很好地toConfirmState()代替toggleState()）。
  3. （然后处于新状态）
    如果我单击“确认是”，然后执行代码（功能代码，本来可以很好地创建删除功能（语义代码））
于 2013-10-30T09:43:50.210 回答
0 
$(".delete").click(function(){    
var ans = confirm("Are You Sure To Delete This Record...");

if(ans)
  {return true;}
else
  {return false;}

... ur code so on
}
于 2013-10-30T09:41:40.950 回答