1

カスタム確認機能を作りたい。

だから、私は次のようなコードを作成します：

function confirm(msg){
  var obj = document.createElement("div");
  var body = document.createElement("div");
  body.innerHTML = msg;

  var foot = document.createElement("div");

  var ok = document.createElement("div");
  ok.innerHTML = "OK";

  var cancel = document.createElement("div");
  cancel.innerHTML = "Cancel";

  foot.appendChild(ok);
  foot.appendChild(cancel);
  obj.appendChild(body);
  obj.appendChild(foot);

  document.getElementsByTagName("body")[0].appendChild(obj);

  ok.onclick = function(){
    return true;
  }

  cancel.onclick = function(){
    return false;
  }
}

また

returnValue = -1;
ok.onclick = function(){
  returnValue = true;
}

canacel.onclick = function(){
  returnValue = false;
}

while(true){
  if(returnValue !== -1) break;
}

return returnValue;

このカスタム確認関数が元の確認関数のように1つのパラメーターを取得する必要がある場合。

カスタム確認機能を作成するにはどうすればよいですか？

4

3 に答える 3

1

個人的には、このためにすでに作成されているサードパーティのダイアログを使用するか、jQueryプラグインを作成するか、少なくともよりオブジェクト指向のアプローチを取ります。現状では、confirm関数をグローバル名前空間（confirm関数が既に存在する場所）に配置しています。

また、ページの実行を停止して、canのように応答を待つことはできないことに注意してくださいwindow.confirm。参照：JavaScriptのconfirm（）関数によって提供される「待機」機能を再現するにはどうすればよいですか？（受け入れられた答えは「あなたはできない」です）。

このようなタスクを実行するために利用できる方法は、コールバックを使用することです。

function customConfirm(message, resultCallback){

    ok.onclick = function(){

      // note that you can pass whatever you want to the callback
      // you are not limited to one parameter.
      resultCallback(true);
    }

    cancel.onclick = function(){
       resultCallback(false);
    }
}

上記の例でresultCallbackは、は確認ボックスのイベントに応答してアクションを実行するように定義された関数です。

メッセージとコールバックの両方を含むオブジェクトを渡して、単一のパラメーターの目標を達成することもできますが、実際の目標は、window.confirm（前述のように）動作が異なるものを置き換えることだと思います。

{ message: "foo", callback: function bar(status){ alert(status); } }
于 2013-03-03T06:06:12.133 に答える
1

confirm値が見つかるまで関数を停止させることはできません。そうしないと、ページ全体がフリーズします。この場合に必要なのは、いずれかのボタンがクリックされたときに実行するコールバックを提供することです（何らかの理由で引数として渡すことができない場合は、グローバル変数またはキューを使用する必要があります）。

var queue = [];
function confirm(msg){
  ...
  var callback = queue.shift();
  ok.onclick = function(){
    callback(true);
  }

  cancel.onclick = function(){
    callback(false);
  }
}

あなたはそれをこのように使用します：

queue.push(function(returnValue) {
    if ( returnValue ) {
       // Code for "yes"
    }
    else {
       // Code for "no"
    }
});
confirm("Are you sure?");
于 2013-03-03T06:06:51.683 に答える
1

私の場合のように、削除確認の問題を解決するためにpromiseを使用しました。ここにコードがあります

function deleteBook(id, elm) {
const container_alert = document.querySelector('.container-alert') 
 
alertMsg('Anda yakin ingin menghapus?').then(() => {
        // console.log('i love you');
        let index = books.findIndex(book => book.id == id);
        books.splice(index, 1)
        updateDataToStorage();
        elm.parentNode.parentNode.remove()
        
        container_alert.classList.add('hidden')
}).catch(() => {
    container_alert.classList.add('hidden')
})

}

私のアラート機能コードは次のとおりです

function alertMsg(msg) {
const container_alert = document.querySelector('.container-alert') 
const btn_yes = document.querySelector('.action-alert .yes')
const btn_cancel = document.querySelector('.action-alert .cancel')

container_alert.classList.remove('hidden')

return new Promise((resolve, reject) => {

    btn_yes.addEventListener('click', function(){
        resolve()  
    })

    btn_cancel.addEventListener('click', function(){
        reject()
    })
})

}

于 2022-02-09T07:08:51.787 に答える