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次のように置き換えられるはずです。

本気ですか？

はい・いいえ

一般的には次のようになります。

初期状態

ユーザーが[削除] を押すと、コンテンツは次のように変更されます。

削除を押した後の状態。

ご想像のとおり、ユーザーが選択した場合

  • はい、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. 確認を求める場合は、CHANGE State (関数コード、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 に答える