从函数访问变量

Question

我有一个函数，它的值插入到另一个函数的变量中。

初始化：

当窗口调整大小时，它会触发 resizeImage() 函数。

$(window).resize(function () {
    resizeImage();
});

调整大小功能：

此函数使用 image-resize 类检查每个元素，并通过更改宽度值添加重新调整图像的 SRC（来自场景 7 的动态）。

问题在于 element.attr('src', newSrc); newSrc 不存在，因为它存储在 sizingMethod() 中。

是否有办法从 sizingMethod() 函数中获取变量并将其放在 element.attr('src', newSrc); 中。

function resizeImage() {
    $('.image-resize').each(function () {

        var element = $(this), src = $(this).attr('src'), regx = /wid=\d+(\.\d)*/g, currentWidth, newWidth, newSrc;

        var attrElement = $(this), attrSrc = $(this).attr('data-zoom-image'), attrRegex = /wid=\d+(\.\d)*/g, attrCurrentWidth, attrNewWidth, attrNewSrc;

        if ($(window).width() > 1824) {
            sizingMethod(src, regx, currentWidth, newWidth, newSrc, '2000');
        } else if ($(window).width() <= 1824 && $(window).width() > 1366) {
            sizingMethod(src, regx, currentWidth, newWidth, newSrc, '1824');
        }

        element.attr('src', newSrc);
    });
};

尺寸调整功能：

function sizingMethod(sSrc, sRegex, sCurrentW, sNewW, sNewSrc, sNewWidth){
    sCurrentW = sSrc.match(sRegex);
    sNewW = 'wid=' + sNewWidth;
    sNewSrc = sSrc.replace(sCurrentW, sNewW);
    textWidth = sNewW.replace('wid=', '');
    $(".dsply-screen-size").text($(window).width());
    $(".dsply-image-size").text(textWidth);
}

Answer 1

当您使用原语时，您发送的是值而不是引用，因此 sNewSrc != newSrc，因此您对 sNewSrc 所做的任何更改都不会更改 newSrc。

您可以使用以下方法修复您的代码：

---

return：返回函数sizingMethod中的值：

if ($(window).width() > 1824) {
    newSrc = sizingMethod(src, regx, currentWidth, newWidth, '2000');
} else if ($(window).width() <= 1824 && $(window).width() > 1366) {
    newSrc = sizingMethod(src, regx, currentWidth, newWidth, '1824');
}

尺码功能：

function sizingMethod(sSrc, sRegex, sCurrentW, sNewW, sNewWidth){
    sCurrentW = sSrc.match(sRegex);
    sNewW = 'wid=' + sNewWidth;
    var sNewSrc = sSrc.replace(sCurrentW, sNewW);
    textWidth = sNewW.replace('wid=', '');
    $(".dsply-screen-size").text($(window).width());
    $(".dsply-image-size").text(textWidth);
    return sNewSrc;
}

---

闭包：如果在匿名函数中声明 sizingMethod，您也可以访问变量 newSrc 和其他变量。

function resizeImage() {
    $('.image-resize').each(function () {

        var element = $(this), src = $(this).attr('src'), regx = /wid=\d+(\.\d)*/g, currentWidth, newWidth, newSrc;

        var attrElement = $(this), attrSrc = $(this).attr('data-zoom-image'), attrRegex = /wid=\d+(\.\d)*/g, attrCurrentWidth, attrNewWidth, attrNewSrc;

        if ($(window).width() > 1824) {
            sizingMethod('2000');
        } else if ($(window).width() <= 1824 && $(window).width() > 1366) {
            sizingMethod('1824');
        }

        element.attr('src', newSrc);

        function sizingMethod(sNewWidth){
            currentWidth = src.match(regx);
            var sNewW = 'wid=' + sNewWidth;
            newSrc = sSrc.replace(currentWidth, sNewW);
            textWidth = sNewW.replace('wid=', '');
            $(".dsply-screen-size").text($(window).width());
            $(".dsply-image-size").text(textWidth);
        }
    });
};

---

object：如果您使用对象/数组而不是原始数据作为参数

function resizeImage() {
    $('.image-resize').each(function () {

        var element = $(this), src = $(this).attr('src'), regx = /wid=\d+(\.\d)*/g, currentWidth, newWidth, newSrc = {};

        var attrElement = $(this), attrSrc = $(this).attr('data-zoom-image'), attrRegex = /wid=\d+(\.\d)*/g, attrCurrentWidth, attrNewWidth, attrNewSrc;

        if ($(window).width() > 1824) {
            sizingMethod(src, regx, currentWidth, newWidth, newSrc, '2000');
        } else if ($(window).width() <= 1824 && $(window).width() > 1366) {
            sizingMethod(src, regx, currentWidth, newWidth, newSrc, '1824');
        }

        element.attr('src', newSrc.src);
    });
};

尺码功能：

function sizingMethod(sSrc, sRegex, sCurrentW, sNewW, sNewSrc, sNewWidth){
    sCurrentW = sSrc.match(sRegex);
    sNewW = 'wid=' + sNewWidth;
    sNewSrc.src = sSrc.replace(sCurrentW, sNewW);
    textWidth = sNewW.replace('wid=', '');
    $(".dsply-screen-size").text($(window).width());
    $(".dsply-image-size").text(textWidth);
}