Question

我想循环遍历包含数组（paletteOne，paletteTwo＆amp; paletteThree）的数组（palettesDIVArray），并将数组中包含的颜色值应用于动态创建的div（palettesDIV）。

创建的palettesDIV数量应基于palettesDIVArray中的数组数量。

每个palettesDIV应该用一个数组中的颜色填充，对于这个purpouse，创建了许多div（palettesDIVparts），这些div是根据每个调色板数组中包含的颜色数量来创建的。

正如你在jsfiddle中看到的那样，只要我只针对一个特定的div并选择要应用的特定数组，一切正常。

我是否可以修改我的代码，以便创建3个div并以更动态的方式应用包含颜色的数组中的颜色？

的javascript：

var
divPalette,
palettePage,
contentSection,
paletteOne,
paletteTwo,
paletteThree,
paletteArray,
palettePart,
widthOfdivPalette,
palettesDIV,
palettesDIVArray,
palettesDIVparts,
divOffSetWidth,
nrOfDivParts,
widthInPixels;


//Initializing varibles and attatching functions
palettePage = document.getElementById("palettePage");
paletteOne = ["hsla(300,21%,85%,0.92)", "hsla(100,91%,85%,0.92)", "hsla(19,71%,85%,0.92)"];
paletteTwo = ["hsla(176,51%,85%,0.92)", "hsla(216,11%,85%,0.92)", "hsla(350,91%,85%,0.92)", "hsla(240,31%,85%,0.92)", "hsla(111,11%,25%,0.92)"];
paletteThree = ["hsla(276,51%,15%,0.92)", "hsla(116,20%,85%,0.32)", "hsla(150,91%,85%,0.92)", "hsla(240,31%,85%,0.92)", "hsla(111,11%,25%,0.92)"];
paletteArray = [paletteOne, paletteTwo, paletteThree];
palettesDIVArray = [];


function createPalettesDivs() {
    for (var i = 0; i < paletteArray.length; i++) {

        palettesDIV = document.createElement("div");
        palettesDIVArray.push(palettesDIV);
        palettesDIV.className = "palettesDIV";
        palettePage.appendChild(palettesDIV);

    }
}

createPalettesDivs();

function createpalettesDIVparts() {

    for (var i = 0; i < paletteArray[1].length; i++) {


        palettesDIVparts = document.createElement("div");
        palettesDIVArray[0].appendChild(palettesDIVparts);
        palettesDIVparts.className = "palettesDIVparts";
        palettesDIVparts.style.backgroundColor = paletteArray[2][i];

        //Setting width of each palettesDIVparts
        divOffSetWidth = palettesDIV.offsetWidth;
        nrOfDivParts = paletteArray[1].length;
        widthInPixels = divOffSetWidth / nrOfDivParts;
        palettesDIVparts.style.width = widthInPixels / divOffSetWidth * 100 + "%";
    }    
}

createpalettesDIVparts();

HTML：

<div id="palettePage"></div>

的CSS：

#palettePage {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    bottom:0;
}
.palettesDIV {
    width: 20%;
    height: 20%;
    float: left;
    margin: 2.5%;
    border: 1px solid black;
}
.palettesDIVparts {
    height: 100%;
    float: left;
}

Answer 1

这会让你更接近，虽然我认为整个事情有点过于复杂。

function createpalettesDIVparts() {

  palettesDIVArray.forEach(function(div, divIdx){ 
    // define pallet being used to make it easier to read throughout function 
    var pallet = paletteArray[divIdx]
    for (i = 0; i < pallet.length; i++) {


        var  palettesDIVparts = document.createElement("div");
        div.appendChild(palettesDIVparts);
        palettesDIVparts.className = "palettesDIVparts";
        palettesDIVparts.style.backgroundColor = pallet[i];

        //Setting width of palettesDIVparts
        divOffSetWidth = palettesDIV.offsetWidth;
        nrOfDivParts = pallet.length;
        widthInPixels = divOffSetWidth / nrOfDivParts;
        palettesDIVparts.style.width = widthInPixels / divOffSetWidth * 100 + "%";


    }
  });

}

的 DEMO

动态创建div并将数组中的值应用于它们

1 个答案: