Javascript 当鼠标悬停在另一个类上时，我是否可以在Ember中不使用jQuery将一个类添加到div中

我已经在Ember中创建了一个表，当我将鼠标悬停在某个列的特定标题单元格上时，我希望高亮显示整个列

我很容易做到这一点，但有人告诉我，这可能不是“余烬之路”

刚到恩伯，所以我在仔细检查

HTML

• 在MouseOver上，我调用highlightBlocks，发送标题单元格的ID
• onmouseout我调用unhighlightBlocks（删除类，而不是添加类） 因为）

余烬成分

有更好的方法吗？

---

余烬的方式是什么？

根据您的余烬版本，您应该

此.element

剩下的是普通的javascript:）

所以，你可以这样做：

this.element.classList.add('highlighted-block');

如果您想要一个子元素，您可以这样做

this.element
  .querySelector(someSelector)
  .classList.add('highlighted-block');

如果您正在寻找“余烬方式”，那么您要做的是使用一个动作，在mouseEnter和mouseLeave上设置一个属性，以检查各个行和列

<th 
    {{action 'setHover' 'colId1' on="mouseEnter"}} 
    {{action 'removeHover' 'colId1' on="mouseLeave"}}>
    Column 1 Header</th>

<th 
    {{action 'setHover' 'colId2' on="mouseEnter"}} 
    {{action 'removeHover' 'colId2' on="mouseLeave"}}>
    Column 2 Header</th>

<th 
    {{action 'setHover' 'colId3' on="mouseEnter"}} 
    {{action 'removeHover' 'colId3' on="mouseLeave"}}>
    Column 3 Header</th>

removehave

将重置悬停列

removeHover(colId){
    if (this.get('hoveredCol) === colId) {
        this.set('hoveredCol',null);
    }
}

在模板中，如果类被悬停，则将其添加到单元格中

<tr>
    <td {{if (eq hoveredCol 'colId1') 'hover'}}>Data 1</td>
    <td {{if (eq hoveredCol 'colId2') 'hover'}}>Data 2</td>
    <td {{if (eq hoveredCol 'colId3') 'hover'}}>Data 3</td>
</tr>

数据1
数据2
数据3

现在，当列标题悬停时，该行将获得将其标记为悬停的类

<tr>
    <td {{if (eq hoveredCol 'colId1') 'hover'}}>Data 1</td>
    <td {{if (eq hoveredCol 'colId2') 'hover'}}>Data 2</td>
    <td {{if (eq hoveredCol 'colId3') 'hover'}}>Data 3</td>
</tr>

---

在中可以看到一个粗略的例子（工作原理稍有不同）。

你能分享一个正在工作的余烬旋转吗？这很好，但并不完全是我想要的。来自非网络背景，这是一件很有用的事情，所以谢谢你的回答。我将我的解决方案添加到我原来的问题中。这正是我所做的。我开始写我的解释，走开了，然后看到了这个。你的答案比我写的好。谢谢！为了这个。

<tr>
    <td {{if (eq hoveredCol 'colId1') 'hover'}}>Data 1</td>
    <td {{if (eq hoveredCol 'colId2') 'hover'}}>Data 2</td>
    <td {{if (eq hoveredCol 'colId3') 'hover'}}>Data 3</td>
</tr>