jquery - 添加百分比值而不是 px

Question

我想创建(某种)全 Angular slider ，其中我有一个带有多个子部分的柔性包装器。每个部分100vw排成一排。现在我想每次单击按钮时都将 Flex-wrapper 的 margin-left 移动到 100%。它不应该添加一次，它应该像 100%、点击、200%、点击、300% 等等一样堆积起来...

我想出了以下内容。

$(document).ready(function() {
    $('.button').click(function() {
        $('.section-wrapper').css('margin-left', '+=100%');
    });
});

这似乎不起作用。当我用 1920px 替换 100% 时，它按预期工作。 (在我的全高清显示器上)

有什么想法吗？

编辑:这是我的代码笔，我希望它现在变得更清晰: https://codepen.io/tuxedo/pen/gOazMxv

Answer 1

也许这就是您正在寻找的。

$(document).ready(function() {
    $('.button').click(function() {
        var e = document.getElementsByClassName("section-wrapper");
        var marLeft = getStyle(e, 'margin-left');
        var final_width = marLeft + 100;
            final_width = final_width+"%";
        $('.section-wrapper').css('margin-left',final_width);
    });
});

或者另一种方式:

var width_value = 0;

$(document).ready(function() {
    $('.button').click(function() {
        width_value += 100;
        $('.section-wrapper').css('margin-left',width_value+"%");
    });
});