Javascript

Question

我有一个关于我找到并编辑的脚本的小问题。最初，脚本从具有特定 ID 的单个输入获取值。我需要的是从多个 divs 发送一个特定值（那些 divs 是从具有多个对象的变量动态创建的 - 函数 colors()）。但是因为它是一个迭代，它不能为有问题的 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>

那么，我怎样才能修改脚本以便在 colors() 函数中将值发送到每个生成的 div 的 changeColor() 函数，只要其中一个 divs被点击了吗？

Answer 1

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

要么直接传颜色值：

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

要么传递 div 的 ID（当然，每个 div 必须有一个 唯一的 ID） .

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>";
    }
}

Javascript - 从具有相同 ID 的多个 div 传递值到函数

Javascript - Passing value to function from multiple divs with same id

variables

jquery

function