javascript - 触发数组中的特定元素,然后遍历其他数组
问题描述
我遇到了这种情况,其中chronicles
包含我在轮播滑块中显示的照片数组。单击箭头时,我希望滑块显示下一张照片。它工作正常,但是所有滑块在点击时都向右/向左移动,而只有我点击的那个应该移动。我怎么能解决这个问题?
这是我的代码:
index = 0;
// if a current image is the same as requested image
isActive(index) {
return this.index === index;
}
// show prev image
showPrev(photos: Photo[], chronicle: Chronicle, id: number) {
if (photos[id].fkChronicle === chronicle.id) {
id = (id > 0) ? --id : photos.length - 1;
}
}
// show next image
showNext(photos: Photo[], chronicle: Chronicle, id: number) {
if (photos[id].fkChronicle === chronicle.id) {
this.index = (this.index < photos.length - 1) ? ++this.index : 0;
}
}
// show a certain image
showPhoto(index) {
this.index = index;
}
..
<div *ngIf="chronicles">
<div *ngFor="let c of chronicles">
{{c.title}} {{c.date | date: 'yyyy-MM-dd'}}
<div class="container slider">
{{!isActive(i)}}
<!-- enumerate all photos -->
<div *ngFor="let photo of c.photos; let i = index">
<img class="slide materialboxed" (click)="showPhoto(i)" [hidden]="!isActive(i)" (change)="isActive(i)" src="../../../assets/chronicles/{{photo.title}}" />
<!-- prev / next controls -->
<a class="arrow prev" (click)="showPrev(c.photos, c, i)"><i class="material-icons">keyboard_arrow_left</i></a>
<a class="arrow next" (click)="showNext(c.photos, c, i)"><i class="material-icons">navigate_next</i></a>
</div>
</div>
</div>
</div>
我没有在线工作示例,但我将此作为参考:https ://codepen.io/leunicornsea/pen/oOOdpM (我在 Angular 7 中重新做了)
解决方案
推荐阅读
- php - 在类似文件夹的页面之后,来自 url 的 GET 变量被忽略
- java - 将 Mono 的列表转换为 Flux
- php - 通过 Soap WSDL 发送数组的问题 - PHP
- c++ - Boost 序列化仅在 main 中有效?当我在其他对象中使用时,一直说“没有名为'serialize'的成员”
- python - 无法从 FARGATE 任务中访问实例元数据
- r - 如何使用 R 将 3% 的列绘制成堆积百分比条形图?
- c# - 使用 nginx 和 docker 托管 blazor 托管的应用程序
- javascript - 返回一页时,JavaScript 工具提示 div 保留在 DOM 中
- c# - 在 Blue Prism 全局代码阶段声明和调用方法
- python-3.x - 有没有一种有效的方法可以一次将 pandas 数据帧转换为 10 行的 3d numpy 数组?