jQuery click if if仅触发一次而不是单击时触发

Question

I am trying to create a mobile menu that has a burger menu, and when you click that menu, it should slide up and down. Before I implement this, I am testing how the jQuery code would work and I can only get it to console log when the page loads and not when you click the actual button.

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();

For some reason it only console logs 'Not Clicked!' when you load up the page. But it isn't responsive when you actually click the button.

Answer 1

Into your function you add handler for a button. It set data-clicked to true only when you click on it.

Checking for data('clicked') executed immediately. If you set this param like into next code

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

you will receive into console "Clicked!". In the next case

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

you will receive "Not Clicked!"

Answer 2

You are only performing the console.log once, when the mobileMenu() function is called. Simply updating the data inside the event handler will not cause the function to fire again, you need to explicitly put the function call inside your event handler, either by moving the event handler outside of the function, or having it call a different function, like so:

 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>