单击其他图像时隐藏 div

Question

I developed an image gallery. Each image has its name as its original state. When I click on an image, the div with the name disappears and a new div with actions is displayed.

Is there a way to click on a different image, the previous image goes back to its original state? (presents the a div with the name again)

At this moment, when I click on the image I can hide the div with the name and present the action div, however when I click on another image, I cannot bring the previous one back to its original state :(

DEMO

code

<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" });
  }

Problem

I clicked on two images, only the last image clicked should have the stock div and not both (the first clicked should be in the original state (div with the name))

Answer 1

You will need to remove the styling you added when you invoke eventB(e, j) . Remove that style from all images and then add it to the image you clicked on.

In other words:

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" });

A better way would be to add a selected field to each image in the Images array:

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

and use that flag to toggle classes that control the display or hiding. then you will only set that flag to false in the loop I showed above and then set it to true for the clicked image, so your event handler function will become:

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

In your html change this line:

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

To this:

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

And add this to your CSS:

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

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