当悬停在另一个类上时，我可以向 div 添加一个类，而不在 Ember 中使用 jQuery答案

【问题标题】：Can I add a class to a div, when hovering over another class, without using jQuery in Ember当悬停在另一个类上时，我可以向 div 添加一个类，而不在 Ember 中使用 jQuery
【发布时间】：2018-08-14 19:02:16
【问题描述】：

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

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

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

HTML

onmouseover 我调用 highlightBlocks 我发送标题单元格的 ID
onmouseout 我调用 unhighlightBlocks（删除类，不添加它因为）

Ember 组件

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

有没有更好的方法来做到这一点？余烬之路是什么？

【问题讨论】：

你能分享一个有效的 Ember Twiddle 吗？

标签： javascript jquery css ember.js

【解决方案1】：

如果您正在寻找“Ember 方式”，您要做的就是使用一个操作来设置 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 将为列 ID 设置一个名为“hoveredCol”的属性。

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 中看到一个粗略的示例（工作方式略有不同）。

【讨论】：

这正是我所做的。我开始写我的解释，走开了，然后看到了这个。你的答案比我写的要好。那谢谢啦！为此。

【解决方案2】：

根据您的 ember 版本，您应该this.element。
剩下的是香草 javascript :)

所以，你可以这样做：

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

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

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

【讨论】：

这很棒，但不是我想要的。来自非网络背景，这是一件有用的事情，所以感谢您的回答。我正在将我的解决方案添加到我原来的问题中。