Question

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

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

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

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

Answer 2

您可以创建两个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隐藏所有option元素，其中包含以$("div[class^='option']").hide();开头的类（仅作为备用按钮添加后退按钮）。

确认对话框触发多次

2 个答案: