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

我开始学习一些JS和jQuery，我正在尝试实现一个切换菜单，当打开另一个菜单时，它会重置另一个菜单上的点击计数器

**。有什么建议吗**

谢谢

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

=

匹配两个值的确切类型

因此，在您的例子中，您在单击数据时存储数值，但尝试访问字符串

'0'

。所以它不匹配

---

相反，您可以只使用将两者匹配的

=

，我不知道这是否是您想要的，但它可以正确切换，您可以将.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);
 });
});

---

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

我去掉了“clicks”计数器，取而代之的是数值计数器、全局变量和每个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;
      }
    });

你可以查一下

---

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

如果（切换单击%2=='0'）

将是

如果（切换单击%2==0）

您将始终得到一个提醒而不是字符串！“不工作”是什么意思？您是否在浏览器控制台中收到错误消息？有什么意外的行为吗？包含相关的HTML代码和/或设置JSFIDLE（）会有所帮助。您确定在开始时DOM中有可用的

$（'.toggle'）

和

$（'.toggle菜单'）

？可能是jQuery执行noop，返回null进行单击，因为语句在ready函数之外，在解释过程中执行，而不是在DOMReady上执行。我编辑了上面的代码，因此它可以工作，但现在我无法重置menuclicks，因为它不再是全局变量。该网站是：如您所见，.toggle是钟形图标，.menuclicks计数器与菜单图标相关。正如你在网站上看到的，我正在尝试重置计数器，因为当你打开一个菜单而不关闭另一个菜单时，它会破坏奇数/偶数计数。啊，在我可以根据上一个菜单回答之前，这个问题已经被编辑过；）再次检查@user3608136谢谢您的快速回复！我对代码做了一些修改，对if语句使用了另一种方法。你知道如何使用全局变量吗？我已经使用了你的建议，我的代码现在看起来是这样的：现在它不再切换。。检查

// 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;
      }
    });