html - 单击图像时隐藏 div 并显示另一个

Question

我有一个图片库，可以让我查看图片。每个图像都有一个带有该图像名称的 div。当我单击图像时，我希望带有名称的 div 消失，取而代之的是一个带有工具的新 div。

当我在图片外部点击时，我想得到原始状态，即图片有名字div。

现在我可以让带有名称的 div 消失，而是使用工具显示 div，所有图像中的所有 div 都打开，我只希望它只是我点击的图像。第二个问题出现了，当我关闭模态时(目标是在工具 div 出现的同时打开一个模态)我试图获得原始状态，但我不能:(我不知道为什么，但在 stackblitz 中，模态没有打开 :(

我留下我的代码以便更好地理解

Stackblitz

我正在使用angular，如果有更正确的形式并发挥其所有潜力，我非常感谢帮助

我的函数

$(document).ready(function () {
      var toolbar = $('.ImageButtonsG').html();
      $(".d-flex").on("click", function () {
        var default_title_ele = $(this).find('.VimageText');
        var default_title = $(default_title_ele).html();
        $(default_title_ele).html(toolbar);
        $("#modalPoll").on('hidden.bs.modal', function () {
          $(default_title_ele).html(default_title);
        });
      });
    });

Answer 1

尝试像这样以 Angular 方式进行操作:

Working Demo

.ts

data = [
    {
      src:
        "https://images.unsplash.com/photo-1485963631004-f2f00b1d6606?auto=format&fit=crop&w=668&q=80",
        text:1,
        show :true
    },
    {
      src:
        "https://images.unsplash.com/photo-1502865787650-3f8318917153?auto=format&fit=crop&w=334&q=80",
        text:2,
        show :true
    }
  ];

.html

    <div class="d-flex flex-column">
            <div (mouseout)="img.show = true" *ngFor="let img of data">
                <a>
                    <img [src]="img.src"
          class="img-fluid Vimages" (click)="img.show = false">
                    <div class="VimageText G1" *ngIf="img.show"> {{img.text}}</div>
                </a>
            </div>
    </div>