当我点击不同的图像时隐藏 div

Question

我开发了一个图片库。 每个图像都有它的名字作为它的原始状态。 当我单击图像时，带有名称的 div 会消失，并显示一个带有操作的新 div。

有没有办法点击不同的图像，前一个图像恢复到原来的状态？ （再次显示带有名称的 div）

此时，当我单击图像时，我可以隐藏带有名称的 div 并显示动作 div，但是当我单击另一个图像时，我无法将前一个图像恢复到原来的状态:(

DEMO

代码

<ul class="mdc-image-list my-image-list" style="padding-left: 10px;padding-right: 10px;">
    <li class="mdc-image-list__item" *ngFor="let product of Images; let  j = index;">
        <div class="mdc-image-list__image-aspect-container">
            <img [src]="product.image" class="mdc-image-list__image"
                (click)="eventB($event,j)">
          </div>
            <div class="mdc-image-list--with-text-protection">
                <div class="mdc-image-list__supporting mdc-image-list__supporting{{j}}">
                    <span class="mdc-image-list__label divT{{j}}">{{product.Name}}</span>
                    <span class="mdc-image-list__label ImageButtonsG divB{{j}}">
                <a >ADD </a>
                <a>Save</a>
                <a>delete</a>
                <a>neu</a>
              </span>
                </div>
                <a class="EyeG eyeB{{j}}" (click)="Produto(product.id)"></a>
            </div>
    </li>
</ul>


      eventB(e, j) {
    $(".divT" + j).css({ "display": "none" });
    $(".mdc-image-list__supporting" + j).css({ "background": "none" });
    $(".divB" + j).css({ "display": "block" });
    $(".eyeB" + j).css({ "display": "block" });
  }

问题

我点击了两张图片，只有最后一张点击的图片应该有 stock div 而不是两者都有（第一个点击的应该是原始状态（div with name））

Answer 1

您需要删除调用eventB(e, j) 时添加的样式。从所有图像中删除该样式，然后将其添加到您单击的图像中。

换句话说：

eventB(e, j) {
  this.Images.forEach((img, index) => {
    $(".divT" + index).css({ "display": "block" });
    $(".mdc-image-list__supporting" + index).css({ "background": "rgba(0,0,0,0.6)" });
    $(".divB" + index).css({ "display": "none" });
    $(".eyeB" + index).css({ "display": "none" });
  });

  $(".divT" + j).css({ "display": "none" });
  $(".mdc-image-list__supporting" + j).css({ "background": "none" });
  $(".divB" + j).css({ "display": "block" });
  $(".eyeB" + j).css({ "display": "block" });

更好的方法是为Images数组中的每个图像添加一个selected字段：

{    
  ID:1,
  Name : "Name",
  Cat: "words",
  image: 'https://material-components-web.appspot.com/images/photos/3x2/16.jpg',
  selected: false,
}

并使用该标志来切换控制显示或隐藏的类。那么你只会在我上面显示的循环中将该标志设置为 false，然后为单击的图像将其设置为 true，因此你的事件处理函数将变为：

eventB(e, j) {
  this.Images.forEach((img, index) => {
    img.selected = index == j;
  });
}

在您的 html 中更改此行：

<div class="mdc-image-list--with-text-protection">

到这里：

<div class="mdc-image-list--with-text-protection" [ngClass]="{'selected': product.selected}">

并将其添加到您的 CSS 中：

.selected {
  .mdc-image-list__supporting{
    background: none;
  }

  .EyeG,
  .mdc-image-list__label,
  ImageButtonsG {
    display: block;
  }
}