Question

我有一个图片库，每个图片上都有一个div及其名称。我的问题是，当我单击图像时，具有该名称的div消失了（这是有意的），但是我无法将带有工具的div放在其位置（div class =“ ImageButtonsG”）。

任何人都可以帮助我，当您单击图像时，名称的div将被工具的div代替。当您在图像外部单击时，工具div将替换为已命名的div（返回原始状态）。

HTML

<div class="container-fluid second" style="cursor: pointer;">
    <div class="d-flex flex-row flex-wrap" style="margin-left: 3px; margin-top: 13px;" data-toggle="modal"
        data-target="#modalPoll">
        <div class="d-flex flex-column">
            <div (mouseout)="img.showText = true" *ngFor="let img of data">
                <a>
                    <img [src]="img.src"
              class="img-fluid Vimages" (click)="img.showText = false">
                    <div class="VimageText G1" *ngIf="img.showText"> {{img.text}}</div>
                </a>
                <div class="ImageButtonsG" style="display: none;">
                    <a><img src="./assets/pin.svg" class="Pin"></a>
                        <a><img src="./assets/inboxpic.svg" style="cursor: pointer;" class="Inbox"></a>
                            <a><img src="./assets/chat.svg" class="Chat"></a>
                                <a><img src="./assets/taskblue.svg" class="Task"></a>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

在组件中使用变量保存在单击UI中的按钮时是否应显示ImageButtonsG div并在其之间切换。

showImageButtonsG: boolean = false;

toggleImageButtonsG() {
   this.showImageButtonsG = !this.showImageButtonsG;
}

对于HTML：

<a>
    <img [src]="img.src" class="img-fluid Vimages" (click)="toggleImageButtonsG()">
        <div class="VimageText G1" *ngIf="img.showText"> {{img.text}}</div>
</a>

如果要切换回文本，则需要在工具部分添加一个类似的click事件（或类似的位置，具体取决于您希望如何工作）。

单击图像时交换div

1 个答案: