javascript - 通过交换其内容在同一个 div 中请求确认？

Question

我有以下 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 应该消失并被替换成如下内容:

Are you sure?

Yes No

一般情况下是这样的:

如果用户按下删除，内容应该像这样改变:

您可能已经想到，如果用户选择

• 是，应该删除parent_element
• 否，.modify 应返回其原始状态

执行此操作的惯用方法是什么？

Answer 1

我根据您的补充说明修改了我的答案。

codepen live example

关于..

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. (然后处于新状态)
   如果我点击“confirmYes”，然后执行代码(功能代码，可以很好地制作删除功能(语义代码))