通过交换其内容在同一个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应该会消失并换成以下内容：

  

你确定吗？

     

是   否

这是一般的看法：

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

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

• 是，应删除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. 如果我要求确认，那么CHANGE State（功能代码，可以很好地使toConfirmState()代替toggleState()）。
3. （然后在新的状态）
   如果我单击“confirmYes”，那么DO执行代码（功能代码，本来可以很好地制作删除功能（语义代码））

Answer 2

$(".delete").click(function(){    
var ans = confirm("Are You Sure To Delete This Record...");

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

... ur code so on
}