当将鼠标悬停在另一个类上时，我可以将一个类添加到 div 上，而无需在 Ember 中使用 jQuery

Question

我在 Ember 中创建了一个表，当我将鼠标悬停在列的特定标题单元格上时，我想突出显示整个列。

我很容易做到这一点，但我被告知这可能不是"余烬方式"。

余烬新手，所以我正在仔细检查。

.HTML

• 鼠标悬停 我调用突出显示块 我发送标题单元格的 ID
• onmouseout 我调用 unhighlightBlocks(删除类，不添加它 因为(

余烬组件

highlightBlocks(value) {
this.$(`.${value}`).addClass('highlighted-block');
}

有没有更好的方法可以做到这一点？ 余烬的方式是什么？

Answer 1

如果你正在寻找"余烬方式"，你要做的是使用一个操作，在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>

setHover会将一个名为"hoveredCol"的属性设置为列 Id。

setHover(colId){
this.set('hoveredCol',colId);
}

removeHover将重置悬停列。

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>

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

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

Answer 2

根据您的 ember 版本，您应该this.element.
其余的是Vanilla JavaScript:)

因此，您可以执行以下操作：

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

如果你想要一个子元素，你可以做

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