如何实现带唯一ID的图片独立旋转并保存旋转状态？

我来帮你搞定这个问题！核心问题出在重复使用唯一ID（页面里ID只能有一个，JS只会找到第一个匹配项），以及没有为每张图片单独维护旋转状态。咱们一步步调整代码：

1. 修正PHP代码：给每个元素添加唯一关联标识 #

首先要确保每个图片组（容器、图片、按钮）都有专属的关联标记，用循环变量$i来区分最方便：

<div id="image-group-<?php echo $i; ?>" class="view_class">
    <div class="container" data-image-id="<?php echo $i; ?>">
        <img src="<?php echo $rowdel; ?>" class="view_image_class" id="image-<?php echo $i; ?>"/>
    </div>
</div>
<button class="sho rotate_left" data-target-group="image-group-<?php echo $i; ?>">Rotate Left</button>

这里的关键调整：

• 给每个图片组外层div加唯一IDimage-group-<?php echo $i; ?>
• 把容器的id="container"改成class="container"，同时用data-image-id存储图片唯一标识，方便后续存状态
• 按钮添加data-target-group属性，关联对应图片组，点击时能精准找到要操作的容器
• 图片ID也改成唯一的image-<?php echo $i; ?>

2. 调整CSS：从ID选择器改为类选择器 #

原来的CSS用了#container这类ID选择器，现在要改成类选择器才能复用在多个容器上：

.container {
    width: auto;
    max-height: 800px;
    overflow: hidden;
    position:absolute;
}
.container.rotate90, .container.rotate270 {
    width: auto;
    max-height: 800px;
    position:absolute;
}
.view_image_class {
    transform-origin: top left; /* IE 10+, Firefox, etc. */
    -webkit-transform-origin: top left; /* Chrome */
    -ms-transform-origin: top left; /* IE 9 */
}
.container.rotate90 .view_image_class {
    transform: rotate(90deg) translateY(-100%);
    -webkit-transform: rotate(90deg) translateY(-100%);
    -ms-transform: rotate(90deg) translateY(-100%);
}
.container.rotate180 .view_image_class {
    transform: rotate(180deg) translate(-100%, -100%);
    -webkit-transform: rotate(180deg) translate(-100%, -100%);
    -ms-transform: rotate(180deg) translateX(-100%, -100%);
}
.container.rotate270 .view_image_class {
    transform: rotate(270deg) translateX(-100%);
    -webkit-transform: rotate(270deg) translateX(-100%);
    -ms-transform: rotate(270deg) translateX(-100%);
}

3. 重写JavaScript：实现单图旋转+状态持久化 #

现在我们要给每个按钮绑定独立的点击事件，同时用localStorage保存每张图片的旋转角度，页面加载时自动恢复状态：

// 页面加载时恢复所有图片的旋转状态
document.addEventListener('DOMContentLoaded', function() {
    // 遍历所有容器，读取localStorage中的保存状态
    document.querySelectorAll('.container').forEach(function(container) {
        const imageId = container.dataset.imageId;
        const savedAngle = localStorage.getItem(`rotate-angle-${imageId}`);
        if (savedAngle) {
            const angle = parseInt(savedAngle);
            container.className = `container rotate${angle}`;
        }
    });

    // 给所有旋转按钮绑定点击事件
    document.querySelectorAll('.rotate_left').forEach(function(button) {
        button.addEventListener('click', function() {
            // 通过data属性找到对应的图片组，再获取里面的容器
            const targetGroupId = this.dataset.targetGroup;
            const container = document.querySelector(`#${targetGroupId} .container`);
            const imageId = container.dataset.imageId;

            // 获取当前旋转角度（无保存状态则默认0）
            let currentAngle = 0;
            const currentClassMatch = container.className.match(/rotate(\d+)/);
            if (currentClassMatch) {
                currentAngle = parseInt(currentClassMatch[1]);
            }

            // 计算新角度并更新容器类名
            const newAngle = (currentAngle + 90) % 360;
            container.className = `container rotate${newAngle}`;
            // 把新角度保存到localStorage，确保每个图片的状态独立
            localStorage.setItem(`rotate-angle-${imageId}`, newAngle);
        });
    });
});

这段代码的核心逻辑：

• 页面加载时，遍历所有容器，从localStorage读取对应图片的旋转角度并应用
• 给每个旋转按钮绑定点击事件，通过data-target-group精准定位要操作的容器
• 解析容器当前的旋转角度，计算新角度后更新样式类名
• 将新角度存入localStorage，用rotate-angle-${imageId}作为键名，保证每个图片的状态互不干扰

这样修改后，用户就能单独旋转任意一张图片，而且刷新页面或重新打开后，图片会保持上次旋转的状态。

内容的提问来源于stack exchange，提问作者ax.falcon