javascript - 使用 slider 缩放背景 CSS

Question

我在应用程序中使用一些 CSS 背景 ( http://css3pie.com/demos/gradient-patterns/ )，并希望能够使用 slider 缩放设计。这是一个 JSFiddle .我能够在一些像条纹和野餐设计上分别缩放 X 和 Y，我只需要像这样玩 background-size:50px 50px;:

//setup the variables based off the css which was set using dropdown
gridItems = $(document.activeElement).val().split("; ");
for (i = 0; i < gridItems.length -1; i++) {
    gridSettings = gridItems[i].split(":");

    if (gridSettings[0]=="background-size"){
        gridSize = gridSettings[1].split(" ");
        gridX = gridSize[0];
        gridY = gridSize[1]
        }
   //on the action of the slide - update value
    $('#gridXY-'+key).on("slide", function(slideEvt) {
        gridXY = slideEvt.value;
        $('.draggable-' + currentLayer).css("background-size", "calc("+ gridX +" * "+ gridXY +") calc("+ gridY +" * "+ gridXY +")");
    });

它可以通过数字或使用来设置，但是当涉及到像蓝图这样的东西时，它有更多的设置 background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;

我正在努力做到这一点，以便它可以采用可变数量的那些，并且可以编写一些可行的东西，但我想到的方法真的很困惑，希望能得到一些帮助来扩展它，这可能是一个比我会做的要干净一点。

我确实找到了这个:http://codepen.io/Erik/pen/JGnsB但他正在使用 LESS 来声明变量，如果可能的话我想远离它。

更新: 这是它的 JSFiddle:http://jsfiddle.net/4L3d9qh2/

我添加了一个应该让我更新它的函数，但出于某种原因，calc() 函数似乎无法更新 div 样式。处理后的样子是这样的: $('.draggable-0').css("背景大小", calc(100px - 4) calc(100px - 4), calc(100px - 4) calc(100px - 4), calc(20px - 4) 计算(20px - 4), 计算(20px - 4) 计算(20px - 4));

$.each(gridSizeArray, function( k, v ){
            if (gridIncrement==1)
            {
                gridXY = "calc(" + v +" - " + value + ") ";
            }else{
                if(isOdd(gridIncrement)){
                gridXY = gridXY + "calc(" + v +" - " + value + ") ";
                }else{
                gridXY = gridXY + "calc(" + v +" - " + value + "), ";
                }
            }


            gridIncrement++
            })

Answer 1

这是最终有效的代码。使用 .each() 循环，如果是偶数，则添加一个逗号，然后删除末尾的最后一个逗号。

                gridItems = $(document.activeElement).val().split("; ");

                for (i = 0; i < gridItems.length -1; i++) {
                    gridSettings = gridItems[i].split(":");

                    if (gridSettings[0]=="background-size"){
                        gridSizeString = gridSettings[1].replace(/,/gi, '');
                        gridSizeArray = gridSizeString.split(" ");
                        }

                    $('[data-type="sliderLayer"][data-layer="'+currentLayer+'"][data-slide="'+currentSlide+'"]').css(gridSettings[0], gridSettings[1]);

                }

            $.each(gridSizeArray, function( k, v ){
            if (gridIncrement==1)
            {
                gridXY = "calc(" + v +" + " + value + "px) ";
            }else{
                if(isOdd(gridIncrement)){
                gridXY = gridXY + " calc(" + v +" + " + value + "px) ";
                }else{
                gridXY = gridXY + "calc(" + v +" + " + value + "px),";
                }
            }
            gridIncrement++
            })
            if (isOdd(gridIncrement))
                {
                    gridXY = gridXY.substring(0, gridXY.length - 1);
                }