如何突出显示某个元素被点击时的位置，但是又忽略了其他元素？

我有一个包含多个子组件的组件。事情是这样的：如何突出显示某个元素被点击时的位置，但是又忽略了其他元素？

<div class="mainComponent"> 
    <child-component-1 *ngFor="let childA of childrenA"></child-component-1> 
    <child-component-2 *ngFor="let childb of childrenB"> </child-component-2> 
    <child-component-3 *ngFor="let childc of childrenC"></child-component-3> 
</div>

如果用户点击一个孩子组件1，我要那么它强调了一些特殊的造型适用于它。很简单，只需添加（mousedown）=“foo（）”（并检查用户是否按住'ctrl'，以便突出显示多个）。我不确定该怎么做，但却忽视了突出显示的其他子组件。

我唯一能想到的就是让所有child-component-x在突出显示时发出一个事件。在我的mainComponent中，我可以遍历所有的子组件，并将每个组件设置为unighighlight。这将涉及遍历所有我的组件，而且可能会有很多。

有没有更好的方法来处理这个问题，还是我的想法是正确的方法？

来源

2016-09-12 user3715648

在纯JavaScript，这是太容易问，如果你知道如何改变在JavaScript类，你也知道如何改变对于同一个函数中其他对象的未被高亮的类，所以我不确定你是否可能只是要求一个css解决方案。 – Saskia

你能否详细说明一下？如果我将一个mousedown处理程序添加到任何子组件，那么当它触发该子组件不知道任何其他组件时，就无法告诉它们不高亮。我可以将其展示给父级，但是它必须检查每个子组件，这可能有很多。 – user3715648

如果你给你的组件一个ID，你可以在MouseDown函数中引用该ID。首先将所有组件设置为非高亮类，然后在高亮类中设置当前具有mousedown事件的组件。 All in 1 MouseDown功能。 – Saskia

这应该做你想要什么：

<div class="mainComponent"> 
    <child-component-1 
    *ngFor="let childA of childrenA" 
    [class.highlight]="isHighlighted(childA)" 
    (click)="toggleHighlight($event, childA)"> 
    </child-component-1> 
    <child-component-2 
    *ngFor="let childb of childrenB"> </child-component-2 
    [class.highlight]="isHighlighted(childB)" 
    (click)="toggleHighlight($event, childB)"> 
    </child-component2> 
    <child-component-3 
    *ngFor="let childc of childrenC" 
    [class.highlight]="isHighlighted(childC)" 
    (click)="toggleHighlight($event, childA)"> 
    </child-component-3> 
</div>

highlightedItems = []; 

isHighlighted(item) { 
    return this.highlightedItems.indexOf(item) >= 0; 
} 

toggleHighlight($event, item) { 
    let idx = this.highlightedItems.indexOf(item); 
    let isControl = e.keyCode != 17; 
    if(isControl) { 
    if(idx < 0) { 
     this.highlightedItems.push(item); 
    } else { 
     this.highlightedItems = this.highlightedItems.slice(idx, 1); 
    } 
    } else { 
    this.highlightedItems.length = 0; 
    if(idx < 0) { 
     this.highlightedItems.push(item); 
    } 
    } 
}

来源

2016-09-13 06:06:05

如何突出显示某个元素被点击时的位置，但是又忽略了其他元素？

回答

相关问题