是否有办法让jQuery调用可变URL实现图片放大跳转功能？

实现方案 #

第一步：修改HTML属性配置 #

给每个.change span新增自定义属性存储原图的直链地址（无需包裹url()，直接填图片链接即可），示例：

<span picChange="url(http://xxx.png)" data-full-src="http://xxx.png"></span>

第二步：优化并补充jQuery逻辑 #

你原有的代码中元素绑定ready的写法存在规范问题，优化后的完整代码如下，同时包含你需要的点击放大功能：

$(document).ready(function() {
    // 原有图片切换逻辑
    $('.change span').click(function() {
        $('.change span').removeClass("active");
        $(this).addClass("active");
        const bgUrl = $(this).attr("picChange");
        // 读取新增的原图地址
        const fullImgUrl = $(this).data("full-src");
        // 将当前激活的原图地址存在展示区元素上，方便后续调用
        $('.pic')
            .css('background-image', bgUrl)
            .data('current-full-src', fullImgUrl);
    });

    // 新增点击展示区放大图片逻辑
    $('.pic').click(function() {
        const currentFullUrl = $(this).data('current-full-src');
        if (!currentFullUrl) return;

        // 方式1：新窗口打开原图，无需操作href属性
        window.open(currentFullUrl, '_blank');

        // 方式2：如果需要动态给a标签赋值href（你提到的变量传href的语法示例）
        // 直接把变量作为attr方法的第二个参数传入即可，没有特殊语法要求
        // const tempLink = $('<a></a>').attr('href', currentFullUrl).attr('target', '_blank')[0];
        // tempLink.click();
    });
});

可选：页面内浮层放大（无需跳转新窗口） #

如果不想跳出当前页面，可以加一个全屏遮罩层实现页内放大：

1. 新增HTML结构

<div class="img-mask" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.8);z-index:999;display:flex;align-items:center;justify-content:center;">
    <img class="full-img" style="max-width:90%;max-height:90%" alt="放大图">
</div>

2. 把上面.pic的点击事件替换为以下逻辑

$('.pic').click(function() {
    const currentFullUrl = $(this).data('current-full-src');
    if (currentFullUrl) {
        $('.full-img').attr('src', currentFullUrl);
        $('.img-mask').show();
    }
});
// 点击遮罩层关闭放大
$('.img-mask').click(function() {
    $(this).hide();
});

关于你提到的href传变量语法说明 #

jQuery中给元素设置href属性直接传变量即可，不需要特殊格式，示例：

const 你的图片链接变量 = 'http://xxx.png';
// 给已有的a标签设置href
$('a.xxx').attr('href', 你的图片链接变量);

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