如何禁用来自循环的其他div，除了单击的div

Posted 2023-03-05

【中文标题】如何禁用来自循环的其他div，除了单击的div

【英文标题】：How to disable other divs coming from loop except the clicked one

【发布时间】：2020-05-24 12:50:08

【问题描述】：

我有一些li 标签，其数据来自循环。当我单击任何li 标记时，它将通过更改其图像变为活动状态并将存储到本地存储中，以便在刷新时单击的标记仍然处于活动状态。在这里，当我们单击时，一个活动对象正在将单击的 li 标签添加到 json 中并将其存储在 localstorage 中。现在的问题是，当我再次单击单击的 li 标记或其外部时，它会切换较早的图像，这不应该发生。同样，除了被点击的标签之外，其他li 标签应该被禁用。下面是代码https://stackblitz.com/edit/angular-skzgno?file=src%2Fapp%2Fapp.component.ts

app.component.html

<hello name=" name "></hello>
<p>
  Start editing to see some magic happen :)
</p>
<div>
    <pre>

  </pre>
    <ul>
<li *ngFor="let item of statusdata" (click)="toggleActive(item, !item.active)">
  <span>item.id</span>
  <span>item.name</span>
  <span>
    <img *ngIf="!item?.active || item?.active === false" src ="https://dummyimage.com/qvga" />
    <img *ngIf="item?.active === true" src ="https://dummyimage.com/300.png/09f/fff" />
  </span>
</li>
    </ul>
</div>

app.component.ts

import  Component  from '@angular/core';

@Component(
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
)
export class AppComponent  
  statusdata: any;

  ngOnInit() 
    this.statusdata = [
       id: 1, name: "Angular 2" ,
       id: 2, name: "Angular 4" ,
       id: 3, name: "Angular 5" ,
       id: 4, name: "Angular 6" ,
       id: 5, name: "Angular 7" 
    ];

    this.statusdata.forEach(item => 
      this.getCacheItemStatus(item);
    );
  

  toggleActive(item, activeStatus = true) 
    item.active = activeStatus;
    localStorage.setItem(`item:$item.id`, JSON.stringify(item));
  

  getCacheItemStatus(item) 
    const cachedItem = localStorage.getItem(`item:$item.id`);
    if (cachedItem) 
      const parse = JSON.parse(cachedItem); // Parse cached version
      item.active = parse.active; // If the cached storage item is active
    
  

【问题讨论】：

谁能帮帮我

【参考方案1】：

在我看来，您只需要在 toggleActive 方法中添加一些逻辑即可。在决定是否对点击执行任何操作之前，您可以检查是否有任何项目处于活动状态。这样的事情能解决你的问题吗？

toggleActive(item, activeStatus = true) 
   if(item.active || !this.statusdata.some(d => d.active))
      item.active = activeStatus;
      localStorage.setItem(`item:$item.id`, JSON.stringify(item));
    

【讨论】：

它现在可以工作我从if中删除了第一个条件，但是如何在点击后禁用其他不活动的li

恐怕我有点不确定你在问什么。您希望点击何时生效？您只需更新if 条件以符合您的要求。

一旦你点击了任何一个li，你就不能再点击另一个li。那些将被禁用

如果用户再次点击同一个li会发生什么？其他的是否应该再次启用？

不，什么都不会发生