Html 单击图像时隐藏div，并显示另一个div

我有一个图像库，允许我查看图像。每个图像都有一个带有该图像名称的div。当我单击图像时，我希望名称为的div消失，并在其位置出现一个新的带有工具的div

当我在图像外部单击时，我希望获得原始状态，即图像的名称为div

现在，我可以让名称为的div消失，而是用工具显示div，在所有图像中打开所有div，我只希望它只是我单击的图像。第二个问题是，当我关闭模式时（目标是在工具div出现的同时打开一个模式），我试图获得原始状态，但我无法：( 我不知道为什么，但在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);
        });
      });
    });

---

试着这样做：

.ts

.html

{{img.text}

试着像这样做：

.ts

.html

{{img.text}

只要坚持使用angularJS项目.Jquery，如果你的用例不需要它的angularJS项目.Jquery，我使用的是法线角度，可能有更好或更简单的方法来获得你想要的东西而不使用Jquery只要坚持使用angularJS项目.Jquery，如果你的用例不需要它的angularJS项目.Jquery，我使用法线角度，可能有更好或更简单的方法o在不使用jquerySounds的情况下获得所需的功能，这是一个很好的解决方案，但我如何在单击图像时使tools div显示？通过单击图像外部，是否可以再次获得初始状态？名称为的div显示是的，您可以通过在div上使用focus out方法返回初始状态，然后您可以重置设置如果是，您可以添加

（mouseout）=“img.show=true”

。在演示中添加了它。检查tools div，您只需在json中添加另一个属性并以相同的方式处理它听起来是一个很好的解决方案，但是我如何在单击图像时使tools div显示？通过单击图像外部是否可以再次获得初始状态？名称为的div显示是的，您可以可以通过在div上使用focus out方法返回初始状态，然后可以重置标记，可以添加

（mouseout）=“img.show=true”

。在演示中添加了它。检查tools div，只需在json中添加另一个属性并以相同的方式处理即可

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
    }
  ];

    <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>