Question

我想在选择时更改页面中的菜单按钮。没问题：我写了（只是用一个例子）：

在CSS中：

.idleColor{background:#0f0; ... }
.redColor {background:#f00;}

在HTML中：

<input id='m3' type=button class=idleColor>
....
<script>  /* at page end */
  $(document).foundation();
  ....
  var activeButton = $("#m"+menuId); //assuming menuID=3
  activeButton.addClass("redColor");    
</script>

这应该将按钮背景颜色从空闲颜色替换为活动颜色......简单但不起作用。

两个奇怪的事情：使用Firebug我看到该类被添加，在'className'和'classList'中，但新颜色没有出现（我不应该重新按钮）。

另一件奇怪的事情是，如果我使用$("#myID").classList.add("redColor")，我会收到一条错误消息：myID.classList未定义（？）

环境：
基金会场地6
JQuery：jquery-2.2.4

Answer 1

试试这个：

var local = stage.globalToLocal(stage.mouseX, stage.mouseY);
addCircle(3, local.x, local.y);

Answer 2

您将本机JavaScript方法与jQuery混淆。

以下问题......

$（＆＃34; #myID＆＃34;）。classList.add（＆＃34; redColor＆＃34;）我收到错误消息： myID.classList未定义（？）

发生

..因为classList不是jQuery的属性，它是本机JavaScript中的HTML元素对象的属性。这可以通过以下方式之一解决。

仅限jQuery

$("#myID").addClass("redColor");

JavaScript / jQuery hybrid

$("#myID")[0].classList.add("redColor");

仅限JavaScript

document.getElementById('myId').classList.add("redColor");

Answer 3

我想陷入耻辱:-(

主要问题（课程没有改变）是由于愚蠢，愚蠢，愚蠢错误造成的。

在我的页面中，我有两套菜单，适用于中小屏幕。

我在每个部分复制了按钮的相关部分......使用相同的ID！

jQuery函数完成了它的工作，在'small'部分（它找到的第一个出现的部分）中选择了正确的按钮，实际上是隐藏的。

由于我在大屏幕上测试，我没有看到任何变化。

就'classList'问题而言，我忘了它是一个数组，所以它需要一个索引。设置$("#myID")[0]修复它。

感谢 fauxserious 澄清了这一点。现在它以两种方式工作，javascript和jQuery。

这次我也学到了一些东西：当你确定代码是正确的时，在其他地方寻找问题。

从Javascript / JQuery更改类

3 个答案:

仅限jQuery

JavaScript / jQuery hybrid

仅限JavaScript