javascript - 确认对话框多次触发

Question

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

现在有一个问题，确认返回菜单后，如果您选择选择其他选项然后返回菜单，会要求您两次确认。我怎样才能解决这个问题？

另外，如何更好地编写 case 语句 block ，而不必为每种情况编写后退按钮功能？

$(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>

Answer 1

每次单击 $(".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>