Question

我对我找到并编辑过的脚本有一个小问题。最初，脚本从具有特定id的单个输入获取值。我需要的是从多个div发送一个特定的值（这些div是从具有多个对象的变量动态创建的 - 函数颜色（））。但是因为它是一个itteration，它不能为有问题的div生成多个id（实际上它可以通过生成每个对象的名称作为div id - 但是那时函数不知道从哪里获得价值来自，我错了吗？）。为了更清楚，这是javascript代码：

<script type="text/javascript" src="jquery-2.1.1.js"></script>
    <div><img src="mug.png" id="mug" onload="getPixels(this)" /></div>
    <input type="text" id="color" value="#6491ee" />
    <input type="button" value="change color" onclick="changeColor()">
    <div id="colorsContainer"></div>
    <script type="text/javascript">
var colors = [
            { nume: "Orange", hex: "#ff6439" },
            { nume: "Blue", hex: "#488dff" }
            ];
function colors(){
for(i=0;i<colors.length;i++){
    var theDiv = document.getElementById("colorsContainer");
    theDiv.innerHTML += "<div id='color1' value="+colors[i].hex+" onclick='changeColor()'>"+colors[i].name+"</div><div style='background-color: "+colors[i].hex+"; width: 120px; height:120px;'></div><br>";
}
}
window.onload = colors;
        var mug = document.getElementById("mug");
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        var originalPixels = null;
        var currentPixels = null;

        function HexToRGB(Hex)
        {
            var Long = parseInt(Hex.replace(/^#/, ""), 16);
            return {
                R: (Long >>> 16) & 0xff,
                G: (Long >>> 8) & 0xff,
                B: Long & 0xff
            };
        }

        function changeColor()
        {
            if(!originalPixels) return;
            var newColor = HexToRGB(document.getElementById("color").value);

            for(var I = 0, L = originalPixels.data.length; I < L; I += 4)
            {
                if(currentPixels.data[I + 3] > 0)
                {
                    currentPixels.data[I] = originalPixels.data[I] / 255 * newColor.R;
                    currentPixels.data[I + 1] = originalPixels.data[I + 1] / 255 * newColor.G;
                    currentPixels.data[I + 2] = originalPixels.data[I + 2] / 255 * newColor.B;
                }
            }

            ctx.putImageData(currentPixels, 0, 0);
            mug.src = canvas.toDataURL("image/png");
        }

        function getPixels(img)
        {
            canvas.width = img.width;
            canvas.height = img.height;

            ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, img.width, img.height);
            originalPixels = ctx.getImageData(0, 0, img.width, img.height);
            currentPixels = ctx.getImageData(0, 0, img.width, img.height);

            img.onload = null;
        }
    </script>

再次，我如何修改脚本，以便在点击其中一个div时将值发送到colors（）函数中每个生成的div的changeColor（）函数？

Answer 1

一种方法是在changeColor函数中声明一个形式参数。您有两种选择：

直接传递颜色值：

＆＃13;

function changeColor(newColor) {...}
function colors()
{
    ...
    theDiv.innerHTML += "<div value='"+colors[i].hex+"' onclick='changeColor(\""+colors[i].hex+"\")'>...</div><br>";
    ...
}

＆＃13;

要么传递div的ID（而且，对于corse，每个div必须有唯一的 ID）。

＆＃13;

function changeColor(id)
{
    var newColor = HexToRGB(document.getElementById(id).value);
    ...
}

function colors()
{
    ...
    for(i=0;i<colors.length;i++)
    {
        var id="color"+i;
        theDiv.innerHTML += "<div id='"+id+"' value='"+colors[i].hex+"' onclick='changeColor(\""+id+"\")'>...</div><br>";
    }
}

＆＃13;

Javascript - 将值传递给具有相同id的多个div

1 个答案: