Question

我开始学习一些JS和jQuery，并且我试图实现一个切换菜单，在打开时重置另一个菜单上的点击计数器。

// JavaScript Document
      var toggleclicks = $('.toggle').data('clicks'); 
      var menuclicks = $('.toggle-menu').data('clicks');    
$(document).ready(function() {


//WRAPPER//
    $('.toggle').click(function() {
      ++toggleclicks;
      if (toggleclicks%2 === 0) {
         // even clicks
         $('.wrapper').css({'margin-top': '-260px'});
         $('.icon-menu, .icon-bell').css({'color': '#ABABAB'});
         $('.toggle-menu').data('clicks',0)
      } else {
         // odd clicks
         $('.wrapper').css({'margin-top': '0'});
         $('.icon-bell').css({'color': 'red'});
         $('.contact, .diet, .hours, .classes, .gym').css({'margin-bottom': '-300px'});
         $('.main-nav').css({'width': '0'});
         $('.icon-menu').css({'color': '#ABABAB'});
      }
    });

//NAV BAR//
    $('.toggle-menu').click(function() {
      ++menuclicks;  
      if (menuclicks%2 === 0) {
         // even clicks
         $('.main-nav').css({'width': '0'});
         $('.icon-menu, .icon-bell').css({'color': '#ABABAB'});
         $('.toggle').data('clicks',0)
      } else {
         // odd clicks
         $('.main-nav').css({'width': '50%'});
         $('.icon-menu').css({'color': 'red'});
         $('.icon-bell').css({'color': '#ABABAB'});
         $('.wrapper').css({'margin-top': '-260px'});
         $('.contact, .diet, .hours, .classes, .gym').css({'margin-bottom': '-300px'});
      }
    });

** As you can see, the toggle won't work。有什么建议吗？**

谢谢！

Answer 1

enter code here

从图像中可以看出，当你使用===时，条件的类型很重要。

===匹配两个值的确切类型。

所以在你的情况下，你在数据点击中存储数字但是试图访问'0'这是一个字符串。所以它不匹配。

相反，您可以使用匹配

的==

Answer 2

我不知道这是否是您想要的，但它正确切换，您的情况下使用.data作为全局变量。也许如果您发布更多代码，我可以为您提供有效的解决方案。

var toggleclicks = $('.toggle').data('clicks'); 
var menuclicks = $('.toggle-menu').data('clicks');  
$(document).ready(function() {
//WRAPPER//

 $('.toggle').click(function() {
    ++toggleclicks;
  if (toggleclicks%2 === 0) {
     // even clicks //
     $('.wrapper').css({'margin-top': '-260px'});
     $('.icon-menu, .icon-bell').css({'color': '#ABABAB'});
     $('.toggle-menu').data('clicks',0) //THIS IS THE OThER MENU
  } else {
     // odd clicks
     $('.wrapper').css({'margin-top': '0'});
     $('.icon-bell').css({'color': 'red'});
     $('.main-nav').css({'width': '0'});
     $('.icon-menu').css({'color': '#ABABAB'});
  }
  //$('.toggle').data("clicks", !toggleclicks);
 });
});

Answer 3

好的，我设法解决了这个问题！

我摆脱了＆＃39;点击＆＃39;计数器，并用数字计数器替换它，全局变量和每个else语句末尾的重置行。

// JavaScript Document
var toggleclicks = 0;
var menuclicks = 0;

$(document).ready(function() {
//WRAPPER//
    $('.toggle').click(function() {
      ++toggleclicks;
      if (toggleclicks%2 === 0) {
         // even clicks
         $('.wrapper').css({'margin-top': '-260px'});
         $('.icon-menu, .icon-bell').css({'color': '#ABABAB'});
      } else {
         // odd clicks
         $('.wrapper').css({'margin-top': '0'});
         $('.icon-bell').css({'color': 'red'});
         $('.contact, .diet, .hours, .classes, .gym').css({'margin-bottom': '-300px'});
         $('.main-nav').css({'width': '0'});
         $('.icon-menu').css({'color': '#ABABAB'});
         menuclicks = 0;
      }
    });

//NAV BAR//
    $('.toggle-menu').click(function() {
      ++menuclicks;  
      if (menuclicks%2 === 0) {
         // even clicks
         $('.main-nav').css({'width': '0'});
         $('.icon-menu, .icon-bell').css({'color': '#ABABAB'});
      } else {
         // odd clicks
         $('.main-nav').css({'width': '50%'});
         $('.icon-menu').css({'color': 'red'});
         $('.icon-bell').css({'color': '#ABABAB'});
         $('.wrapper').css({'margin-top': '-260px'});
         $('.contact, .diet, .hours, .classes, .gym').css({'margin-bottom': '-300px'});
         toggleclicks = 0;
      }
    });

您可以在http://boazkerengil.com

上查看

感谢大家的帮助，这真的很有帮助。

切换菜单并单击计数器重置

3 个答案: