时间戳

首页 > 解决方案 > 为什么我的 javascript 函数在移动视图中不起作用？

javascript - 为什么我的 javascript 函数在移动视图中不起作用？

问题描述

我有这个函数可以从 div 中添加和删除一个类，以便它可以在立方体上的面之间交换。问题是当它在移动时它不起作用。该函数运行，但不会删除 currentClass 变量。当我对它进行控制台日志时。它显示没有值，但它应该在函数运行时添加一个值。我不知道为什么它没有被赋值。

const handleClick = e => {
  e.preventDefault();
    var cube = document.querySelector('.cube');
    var showClass = 'show-' + e.currentTarget.value;
    console.log(showClass);
    if (currentClass) {
      cube.classList.remove(currentClass);
    }
    cube.classList.add(showClass);
    currentClass = showClass;
    var x = window.matchMedia('(max-width: 600px)');
    if (x.matches) {
      handleDrawerToggle();
    }
  };

顺便说一句，currentClass 变量是在函数之前声明的。在移动视图中，它使用 if 语句添加类，但不删除前一个类。因此，当您单击导航栏按钮时，它会不断添加类。在桌面模式下按预期工作，但在移动视图中不正常。任何帮助，将不胜感激。

到目前为止，这是该应用程序的实时版本： https : //portfolio-3d.herokuapp.com/ 这是 github： https ://github.com/apgomez85/3d-cube-portfolio

标签： javascripthtmlcss

解决方案

好的，我想通了。我必须将 currentClass 变量声明高一级。我犯了一个简单的错误。

推荐阅读