Question

我正在使用.map来获取一系列元素ID（这被命名为＆＃39; ids＆＃39;），其中包含＆＃39;默认突出显示＆＃39;类。在mouseenter上删除该类之后，我想将该类返回给那些特定的id（基本上，保留它是我如何找到它的。）

现在有两件事给我带来麻烦：

当我动态地将数据ID添加到td元素，然后使用这些数据ID来创建＆＃39; ID＆＃39;我的mouseenter停止添加＆＃39; HIGHLIGHT＆＃39;上课（不知道为什么会这样）
在mouseleave上我无法循环播放＆＃39; id＆＃39;并返回＆＃39;默认突出显示＆＃39;对他们最初所在的元素进行分类

我想我应该使用这样的东西，但它显然不起作用：

$.each(ids, function() {
   $(this).addClass('default-highlight');
});

我已经尝试了很多东西，但不断提出来。我附加了一个链接到codepen.io where I use data-ids的动态添加到表格中的链接（这个是鼠标中心不起作用的）和一个codepen one，其中我使用常规ID作为默认突出显示一切看起来都像它应该的那样（它不是，因为我想使用动态生成的数据ID，然后是随后生成的数组来重新应用这些类）。

这两个代码在顶部都有一个gif，显示交互应该如何工作。

如果有任何不清楚的地方，请告诉我。谢谢你的阅读！

Answer 1

您需要在ID选择器

之前添加#

$.each(ids, function() {
   $('#'+this).addClass('default-highlight');
});

或者您可以在map()和join()

的帮助下使用通用选择器

$(ids.map(function(i, v) {
  return '#' + v;
}).join()).addClass('default-highlight');

或者您可以在获取ID时添加#，然后您只需加入它们

var ids = $('.default-highlight').map(function(i) {
  return '#'+$(this).data('id');
}).get();
...
...
...
$(ids.join()).addClass('default-highlight');

Answer 2

当您可以直接存储对jQuery元素的引用时，似乎存储ID并使用它们是过度的：

$highlightCells = $('.default-highlight').removeClass('default-highlight')

然后让课程回来：

$highlightCells.addClass('default-highlight')

这是一个codepen fork：http://codepen.io/anon/pen/ZbOvZR?editors=101

Answer 3

使用这种方式：

$.each(ids, function() {
   $("#" + this).addClass('default-highlight');
});

在Javascript

3 个答案: