javascript：如何更改多个输入值取决于其他span数据属性？

我正在尝试在页面加载上运行一个函数，该函数会更改输入值，输入值会被更改，但所有值都是相同的

以下是我的代码片段：

<span class="toggle-color" data-hex="#f5f5dc" data-color="bezhevyi" style="background-color: #f5f5dc">
    <input type="checkbox" style="display: none;" name="color" class="colors">
</span>
<span class="toggle-color" data-hex="#ffffff" data-color="belyi" style="background-color: #ffffff">
    <input type="checkbox" style="display: none;" name="color" class="colors">
</span>
<span class="toggle-color" data-hex="#add8e6" data-color="goluboi" style="background-color: #add8e6">
    <input type="checkbox" style="display: none;" name="color" class="colors">
</span>

$(document).ready(function(){
    var x = document.getElementsByClassName('colors');
    var y = document.getElementsByClassName('toggle-color');
    for(z = 0; z < y.length; z++){
        for(i = 0; i < x.length; i++) {
            x[i].value = y[z].dataset.color;
            // console.log(y[z].dataset.color);
        }
    }
});

$（文档）.ready（函数（）{
var x=document.getElementsByClassName（'colors'）；
var y=document.getElementsByClassName（'toggle-color'）；
对于（z=0；z

$（文档）.ready（函数（）{
//选择所有颜色，并设置其值
$（'.colors'）.val（函数（）{
//返回要为每个输入设置的父切换颜色的数据颜色
返回$（this）.closest（'.toggle color'）。数据（'color'）；
});
});

当然可以。您正在为每个y循环所有x，并且每次都设置所有x。Ooopsy，对不起，这是我的错误，我没有注意到，现在它工作了，（z=0；）

刚好够：）。感谢您的关注；）确保声明

z

和

i