Question

你好我创建一个评级系统，我有5个div元素..我想当我点击它们中的每一个元素的背景颜色变成灰色。

我写了一个指令，它对它们执行applay背景颜色。但是我怎么能做这个逻辑，当一个元素点击其他元素shoud没有背景颜色....因为我想只选择元素有灰色背景... 请帮助thankyou

  takeVote(e,event){
    this.rating = e;
  }

HTML：

      <div class="rating_start">
        <div class="has_start_con " appVote>
          <a (click)="takeVote(5,$event)" >
            <div class="t"> prefect</div>
            <div class="i"><i class="mdi mdi-emoticon-excited"></i></div>
          </a>
        </div>
        <div class="has_start_con" appVote>
          <a (click)="takeVote(4,$event)">
            <div class="t">good</div>
            <div class="i"><i class="mdi mdi-emoticon-happy"></i></div>
          </a>
        </div>
        <div class="has_start_con" appVote>
          <a (click)="takeVote(3,$event)">
            <div class="t">normal</div>
            <div class="i"><i class="mdi mdi-emoticon-neutral"></i></div>
          </a>
        </div>
        <div class="has_start_con" appVote>
          <a (click)="takeVote(2,$event)">
            <div class="t">not bad</div>
            <div class="i"><i class="mdi mdi-emoticon-sad"></i></div>
          </a>
        </div>
        <div class="has_start_con" appVote>
          <a (click)="takeVote(1,$event)">
            <div class="t">bad</div>
            <div class="i"><i class="mdi mdi-emoticon-dead"></i></div>
          </a>
        </div>
      </div>

我的指示：

@Directive({
  selector: '[appVote]'
})
export class VoteDirective {

  constructor(public elm: ElementRef, public renderer: Renderer2) {
  }


  @HostBinding('style.background-color') background: string;


  @HostListener('click') onClick() {
    //let part = document.getElementsByClassName('has_start_con')
    //this.renderer.setStyle(part, 'backgroundColor', 'none');
    this.renderer.setStyle(this.elm.nativeElement, 'backgroundColor', '#d2d2d2');

    //this.background = 'red'
  }

}

Answer 1

尝试从事件中捕获评级值1 - 5，并将该值分配给“selectedRating”属性。然后，声明一个“isSelected”属性从输出事件中分配nativeElement并有条件地将css nth-child选择器应用于容器div，该容器div也具有class =“rating_start”，其中nth-child（selectedRating）。

或者，请参阅角度文档备忘单，模板语法部分以有条件地应用样式：

<div [class.extra-sparkle]="isDelightful">

•将元素上存在的CSS类额外闪光与表达式的真实性结合起来。

Answer 2

在模板中执行此操作要容易得多：

<div *ngFor="let item of [1,2,3,4,5];let i = index" 
         [style.background]="selected==i?'red':'grey'" (click)="selected=i">
    Option {{i}}
</div>

其中selected包含所选元素索引。点击div应该改变它的值并触发背景颜色变化。在课堂上设置：selected = 0

Demo

如果您仍想使用该指令，那么这样的事情应该有效：

  @HostListener('click', [])
  onClick(): void {
    let parent = this.elm.nativeElement.parentNode;
    for (var i = 0; i < parent.children.length; i++) {
      parent.children[i].classList.remove('red');
    }
    this.elm.nativeElement.classList.add('red');
  }

其中：

.red{
  background-color:red
}

Demo

角度变化点击元素项目backgorund颜色删除其他项目背景颜色

2 个答案: