JavaScript:如何更改多输入值取决于其他 span 数据属性?

Question

我正在尝试在页面加载时运行一个更改输入值的函数，输入值已更改，但都是相同的值。

这是我的代码片段：

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

Answer 1

$(document).ready(function(){
//select all the colors, and set their value
$('.colors').val(function(){
//return the parent toggle-color's data-color to be set for each input
return $(this).closest('.toggle-color').data('color');
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="toggle-color" data-hex="#f5f5dc" data-color="bezhevyi" style="background-color: #f5f5dc">
<input type="checkbox" name="color" class="colors">
</span>
<span class="toggle-color" data-hex="#ffffff" data-color="belyi" style="background-color: #ffffff">
<input type="checkbox" name="color" class="colors">
</span>
<span class="toggle-color" data-hex="#add8e6" data-color="goluboi" style="background-color: #add8e6">
<input type="checkbox" name="color" class="colors">
</span>