如何通过单个按钮点击切换jQuery Magnify图片放大镜的开关状态

原有代码问题 #

• 3张图片重复使用id="image"不符合HTML规范，id在单页面中必须唯一，功能实现依赖zoom类选择器，可直接删除重复id避免报错。
• 点击事件中给#demo元素赋值$(document).ready()的写法无效，DOM加载监听仅需执行一次，无需放在点击回调内。

可直接运行的完整代码 #

HTML部分（替换原有图片和按钮代码即可） #

<img src="img/1.jpg" class="zoom" data-magnify-src="img/1.jpg">
<img src="img/2.jpg" class="zoom" data-magnify-src="img/2.jpg">
<img src="img/3.jpg" class="zoom" data-magnify-src="img/3.jpg">

<button onclick="myFunction()">开启放大镜</button>
<!-- 如果你需要用demo元素显示状态提示可以保留，否则删除即可 -->
<div id="demo"></div>

JS部分（替换原有脚本代码即可） #

<script src="jquery.magnify.js" charset="utf-8"></script>
<script>
// 标记放大镜状态，默认关闭
let isMagnifyOn = false;

// DOM加载完成后注册点击方法
$(document).ready(function() {
    window.myFunction = function() {
        if (!isMagnifyOn) {
            // 初始化放大镜
            $('.zoom').magnify();
            isMagnifyOn = true;
            // 切换按钮文字
            $('button').text('关闭放大镜');
            // 如需给demo元素加提示可打开下面注释
            // document.getElementById("demo").textContent = '放大镜已开启';
        } else {
            // 调用插件内置destroy方法销毁实例，恢复默认图片状态
            $('.zoom').magnify('destroy');
            isMagnifyOn = false;
            $('button').text('开启放大镜');
            // document.getElementById("demo").textContent = '放大镜已关闭';
        }
    }
});
</script>

核心原理 #

• 用布尔变量记录放大镜当前状态，避免重复初始化插件
• 该放大镜插件内置destroy实例方法，调用后会自动解绑所有相关事件、移除插件生成的放大预览DOM，完全还原图片初始状态
• 额外增加按钮文字切换逻辑优化交互体验，不需要可以直接删除相关代码

内容的提问来源于stack exchange，提问作者Anonymous