确认对话框多次触发

confirm dialog box triggers multiple time

本文关键字：对话框 确认      更新时间：2023-09-26

我有一个菜单的以下代码，允许用户从给定的选项中进行选择，并将其重定向到该选项的相关内容。还有一个后退按钮，本应将用户返回到菜单，但它首先需要用户确认操作。

现在有一个问题，在确认返回菜单后，如果您选择选择另一个选项，然后返回菜单，它会要求您两次确认。我该怎么解决这个问题？

此外，我如何才能更好地编写case语句块，而不必为每个case编写back按钮函数？

$(document).ready(function() {
  $(".option1, .option2, .option3, .option4").hide();
  $(".btn").on("click", function() {
    $('.menu').hide();
    var idName = $(this).attr('id');
    switch (idName) {
      case "option1":
        $('.option1').show();
        $(".back_btn").on("click", function() {
          if (confirm("Are you sure you want to go back to the menu?")) {
            $('.option1').hide();
            $('.menu').show();
          } else {
            //Do nothing
          }
        });
        break;
      case "option2":
        $('.option2').show();
        $(".back_btn").on("click", function() {
          if (confirm("Are you sure you want to go back to the menu?")) {
            $('.option2').hide();
            $('.menu').show();
          } else {
            //Do nothing
          }
        });
        break;
      case "option3":
        $('.option3').show();
        $(".back_btn").on("click", function() {
          if (confirm("Are you sure you want to go back to the menu?")) {
            $('.option3').hide();
            $('.menu').show();
          } else {
            //Do nothing
          }
        });
        break;
      case "option4":
        $('.option4').show();
        $(".back_btn").on("click", function() {
          if (confirm("Are you sure you want to go back to the menu?")) {
            $('.option4').hide();
            $('.menu').show();
          } else {
            //Do nothing
          }
        });
        break;
    };
  });
});
ul {
  list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <ul>
    <li class="btn" id="option1">
      <button>Option 1</button>
    </li>
    <li class="btn" id="option2">
      <button>Option 2</button>
    </li>
    <li class="btn" id="option3">
      <button>Option 3</button>
    </li>
    <li class="btn" id="option4">
      <button>Option 4</button>
    </li>
  </ul>
</div>
<div class="option1">Content 1
  <button class="back_btn">back</button>
</div>
<div class="option2">Content 2
  <button class="back_btn">back</button>
</div>
<div class="option3">Content 3
  <button class="back_btn">back</button>
</div>
<div class="option4">Content 4
  <button class="back_btn">back</button>
</div>

每次单击$(".btn")时，都会在$(".back_btn")选择器上创建另一个侦听器。

您可以使用.one，它将在单击一次后退按钮后删除侦听器。

$(".back_btn").one("click", function()...

$(document).ready(function() {
  $(".option1, .option2, .option3, .option4").hide();
  $(".btn").on("click", function() {
    $('.menu').hide();
    var idName = $(this).attr('id');
    switch (idName) {
      case "option1":
        $('.option1').show();
        $(".back_btn1").one("click", function() {
          if (confirm("Are you sure you want to go back to the menu?")) {
            $('.option1').hide();
            $('.menu').show();
          } else {
            //Do nothing
          }
        });
        break;
      case "option2":
        $('.option2').show();
        $(".back_btn2").one("click", function() {
          if (confirm("Are you sure you want to go back to the menu?")) {
            $('.option2').hide();
            $('.menu').show();
          } else {
            //Do nothing
          }
        });
        break;
      case "option3":
        $('.option3').show();
        $(".back_btn3").one("click", function() {
          if (confirm("Are you sure you want to go back to the menu?")) {
            $('.option3').hide();
            $('.menu').show();
          } else {
            //Do nothing
          }
        });
        break;
      case "option4":
        $('.option4').show();
        $(".back_btn4").one("click", function() {
          if (confirm("Are you sure you want to go back to the menu?")) {
            $('.option4').hide();
            $('.menu').show();
          } else {
            //Do nothing
          }
        });
        break;
    };
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <ul>
<li class="btn" id="option1">
  <button>Option 1</button>
</li>
<li class="btn" id="option2">
  <button>Option 2</button>
</li>
<li class="btn" id="option3">
  <button>Option 3</button>
</li>
<li class="btn" id="option4">
  <button>Option 4</button>
</li>
  </ul>
</div>
<div class="option1">Content 1
  <button class="back_btn1">back</button>
</div>
<div class="option2">Content 2
  <button class="back_btn2">back</button>
</div>
<div class="option3">Content 3
  <button class="back_btn3">back</button>
</div>
<div class="option4">Content 4
  <button class="back_btn4">back</button>
</div>

您可以创建两个click()事件，一个用于所有选项，另一个用于后退按钮，而不是使用各种switch语句，如下所示：

$(document).ready(function () {
    $(".option1, .option2, .option3, .option4").hide();
    $(".btn").on("click", function () {
        $('.menu').hide();
        var idName = $(this).attr('id');
        $('.' + idName).show();
    });
    $(".back_btn").on("click", function () {
        if (confirm("Are you sure you want to go back to the menu?")) {
            $("div[class^='option']").hide();
            $('.menu').show();
        }
    });
});
ul {
    list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
    <ul>
        <li class="btn" id="option1">
            <button>Option 1</button>
        </li>
        <li class="btn" id="option2">
            <button>Option 2</button>
        </li>
        <li class="btn" id="option3">
            <button>Option 3</button>
        </li>
        <li class="btn" id="option4">
            <button>Option 4</button>
        </li>
    </ul>
</div>
<div class="option1">Content 1
    <button class="back_btn">back</button>
</div>
<div class="option2">Content 2
    <button class="back_btn">back</button>
</div>
<div class="option3">Content 3
    <button class="back_btn">back</button>
</div>
<div class="option4">Content 4
    <button class="back_btn">back</button>
</div>

此外，您可以使用选择器$("div[class^='option']").hide();（只是为后退按钮添加的选项），通过以option开头的类隐藏所有div元素。

相关文章：