在 foreach 语句中分别隐藏/取消隐藏每张照片-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

在 foreach 语句中分别隐藏/取消隐藏每张照片

P粉211600174 2024-02-03 22:53:06

[HTML讨论组]

997

更新：它与我一起使用@Exildur解决方案，但当我刷新页面时，隐藏的照片再次可见：S。

我有一个项目列表，每个项目都有自己的照片。我需要为每张照片添加一个隐藏/显示照片按钮。问题是当我使用带有 id 的 js 函数时，它只隐藏/显示第一张照片，因为 Id 必须是唯一的。这是代码：

foreach (var item in Model.AttachmentsList)
{
   
                    
      @Html.Raw("  ")
                   
    

    
               

 }

P粉211600174

全部回复(1)

P粉3492227722024-02-04 18:15:24 1楼

您可以使用列表中附加到名称的项目索引来为每张照片创建唯一标识符。例如：

foreach (var item in Model.AttachmentsList)
{
    var index = Model.AttachmentsList.IndexOf(item);
    
        @Html.Raw(" ")
    
    
}

这将为每张照片创建一个唯一的 ID，例如照片_0、照片_1 等

该按钮有一个 onclick 属性，该属性调用togglePhoto() 函数并将项目的索引作为参数传递，然后获取相应的照片并通过将显示样式设置为阻止/无来切换其可见性。

更新：页面刷新后持久化

根据要求，为了包括跨页面刷新的隐藏/可见图像的持久性，我添加了使用浏览器存储来记录哪些图像可见或不可见的功能：

foreach (var item in Model.AttachmentsList)
{
    var index = Model.AttachmentsList.IndexOf(item);
    var display = localStorage.getItem('photo_' + index + '_display') || 'block';
    
        @Html.Raw(" ")
    
    
}

在上面的示例中，将从 localStorage 中检索每张照片的“显示”样式值。如果不存在，它将默认为“阻止”（可见）。

每当单击按钮时，togglePhoto() 函数都会将更新的显示值存储在 localStorage 中。

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>