我有以下 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
应返回其原始状态
执行此操作的惯用方法是什么?
最佳答案
我根据您的补充说明修改了我的答案。
关于..
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)。
另请注意它的可读性:
- 如果我点击“删除”,然后询问确认(语义代码)。
- 如果我要求确认,然后更改状态(功能代码,用
toConfirmState()
代替toggleState()
可能会很好)。 - (然后处于新状态)
如果我点击“confirmYes”,然后执行代码(功能代码,可以很好地制作删除功能(语义代码))
关于javascript - 通过交换其内容在同一个 div 中请求确认?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19678651/