Question

我正在尝试创建一个具有汉堡菜单的移动菜单，当您单击该菜单时，它应该会上下滑动。在实现此功能之前，我正在测试jQuery代码的工作方式，并且只能在页面加载时（而不是在您单击实际按钮时）将其添加到控制台日志中。

jQuery：

function mobileMenu() {
  $('.mobile-menu-button').click(function() {
    $(this).data('clicked', true)
  });

  if ($('.mobile-menu-button').data('clicked')) {
    console.log("Clicked!")
  } else {
    console.log("Not Clicked!")
  }
};
mobileMenu();

由于某种原因，它仅控制台记录“未单击！”当您加载页面时。但是当您实际单击按钮时，它没有响应。

Answer 1

在函数中添加按钮处理程序。仅当您单击时，它会将数据单击设置为true。

立即执行数据检查（“单击”）。如果将此参数设置为下一个代码

<button class="mobile-menu-button" data-clicked="true">Click me</button>

您将进入控制台“ Clicked！”。在接下来的情况下

<button class="mobile-menu-button">Click me</button>

您将收到“未点击！”

Answer 2

在调用mobileMenu（）函数时，您只执行一次console.log。简单地更新事件处理程序中的数据不会导致函数再次触发，您需要通过将事件处理程序移到函数外部或使其调用其他函数（例如，所以：

function logger() {
  if ($('.mobile-menu-button').data('clicked')) {
    console.log("Clicked!")
  } else {
    console.log("Not Clicked!")
  }
}

function mobileMenu() {
  $('.mobile-menu-button').click(function() {
    $(this).data('clicked', true)
    logger();
  });
  logger();
};
mobileMenu();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="mobile-menu-button">Button</button>

jQuery单击if else else仅触发一次，单击时不触发

2 个答案: