javascript - 下一个和上一个元素

Question

大家好，我是 angular2 的新手

尝试了几种方法来实现这种功能(看看jsfiddle)。

我需要的是单击它，将事件类添加到下一个元素，并从当前元素中删除相同的元素，反之亦然，以便显示下一个元素并隐藏上一个元素。添加/删除类或添加删除样式可以为我工作..或任何其他可以实现这种事情的东西

我刚刚用 jQuery 实现了它。

但我只想用 Angular2 来实现它，任何东西都可以为我工作

html:

<ul>
  <li class="active">item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>

<button  class="prev">prev</button> <button class="next">Next</button>

jQuery:

$('.next').click( function(){
    $('.active').next().addClass('active').prev().removeClass('active')
})
$('.prev').click( function(){
    $('.active').prev().addClass('active').next().removeClass('active')
})

https://jsfiddle.net/svgmc125/

编辑:

使用@pixelbits help 的帮助更新代码

现在 HTML 将是

  <li>
      <my-component></my-component>
  </li>
  <li>
      <my-component-1></my-component-1>
  </li>

  <li [class]="slides[selectedIndex] == slide ? 'active': ''" 
                 *ngFor="let slide of slides">
    <img src="../../assets/images/onboarding/slides/{{slide}}.png" alt="">
  </li>
  <li>
      <my-component-2></my-component-2>
  </li>
  <li>
      <my-component-3></my-component-3>
  </li>

ts:

export class SlidesComponent{

  slides: any[];
    selectedIndex: number;
    constructor() {
        this.selectedIndex = 0;
        this.slides = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
    }

    next() {
       ++this.selectedIndex;
    }

    previous() {
        --this.selectedIndex;
    }

 }

循环 <li> 一切正常但仍然有剩余 <li> 的问题

Answer 1

您所需要的只是在组件中拥有一个引用事件项(或其索引)的字段:

items: Array<string> = ['first', 'second', 'third'];
activeItem: string = items[0];

previous() {
    const currentIndex = this.items.indexOf(this.activeItem);
    const newIndex = currentIndex === 0 ? this.items.length - 1 : currentIndex - 1;
    this.activeItem = this.items[newIndex];
}

next() {
    const currentIndex = this.items.indexOf(this.activeItem);
    const newIndex = currentIndex === this.items.length - 1 ? 0 : currentIndex + 1;
    this.activeItem = this.items[newIndex];
}

在 View 中:

<div *ngFor="let item of items" [class.active]="item === activeItem">{{ item }}</div>