【发布时间】：2021-06-24 23:54:47
【问题描述】：
我正在构建一个图像编辑器。为了进行预设，我为每个按钮分配了一个自定义 data 值。每个按钮在单击时会将其内部值设置为文档中所有范围滑块的值。
我首先为每个 filter-container 分配一个 onclick 函数来解决这个问题，该函数会删除字符串并构建一个新函数。我将此功能分配给现有按钮。
最后，我点击了这个按钮。
function setPreset(inp) {
const key = inp.getAttribute("data-preset-key");
document.getElementById("newbut").setAttribute("onclick", "useKey('" + key.replaceAll("-", "', '") + "')");
document.getElementById("newbut").click()
}
分配给按钮的函数很长，每次引入新输入时我都必须添加一个新变量。这就是为什么我来寻求你的帮助。函数可以将字符串分隔成唯一值吗？
我希望我的意思明白了。
//编辑，codepen sn-p:
//------------------------------- set preset
function keyReaderActivate() {
var inputs = document.querySelectorAll(".user-input");
for (var i = 0; i < inputs.length; i++) {
inputs[i].addEventListener("input", function() {
logVals();
});
}
var setter = document.querySelectorAll(".filter-container");
for (var i = 0; i < setter.length; i++) {
setter[i].addEventListener("click", function() {
setPreset(this);
});
}
}
function setPreset(inp) {
const key = inp.getAttribute("data-preset-key");
document.getElementById("demo").innerHTML = key.replaceAll("-", ", ");
document.getElementById("newbut").setAttribute("onclick", "useKey('" + key.replaceAll("-", "', '") + "')");
document.getElementById("newbut").click()
}
function useKey(a, b, c, d, e, f) {
var list = document.querySelectorAll(".user-input");
list[0].value = a;
list[1].value = b;
list[2].value = c;
list[3].value = d;
list[4].value = e;
list[5].value = f;
}
function logVals() {
var list = document.querySelectorAll(".user-input");
const arr = [];
for (var i = 0; i < list.length; i++) {
const computers = list[i].value;
arr.push(computers);
}
document.getElementById("demo").innerHTML = arr.join("-");
}nav {
display: flex;
justify-content: space-around
}
nav * {
border: solid;
width: 20%;
text-align: center;
border-radius: 5px;
}<body onload="keyReaderActivate()">
<div id="demo-intro"></div>
<div id="demo"></div>
<nav>
<div data-preset-key="20-14-70-62-100-50" id="1" class="filter-container">A</div>
<div data-preset-key="10-50-11-50-100-30" id="2" class="filter-container">B</div>
<div data-preset-key="80-100-11-62-50-50" id="3" class="filter-container">C</div>
<div data-preset-key="50-50-100-62-100-70" id="4" class="filter-container">D</div>
</nav>
<div id="demo-name"></div>
<ul>
<li><input type="range" class="user-input"></li>
<li><input type="range" class="user-input"></li>
<li><input type="range" class="user-input"></li>
<li><input type="range" class="user-input"></li>
<li><input type="range" class="user-input"></li>
<li><input type="range" class="user-input"></li>
</ul>
<button id="newbut">Check it</button>
</body>function useKey(a, b, c, d, e, f) {
var list = document.querySelectorAll(".user-input");
list[0].value = a;
list[1].value = b;
list[2].value = c;
list[3].value = d;
list[4].value = e;
list[5].value = f;
}
【问题讨论】：
-
split()方法不是做你想做的吗？ -
它最初是为了获取子字符串。然后呢？我如何为每个分配一个？
-
拆分成数组后，可以循环赋值给
list[i].value。 -
vals = this.dataset.presetKey.split("-"); vals.forEach((val, i) => list[i].value = val); -
与此结合起来看起来如何：
function setPreset(inp) { const key = inp.getAttribute("data-preset-key"); document.getElementById("demo").innerHTML = key.split("-");我要在这里添加它吗？` } ` 我的意思是：list[I]value; vals = this.dataset.presetKey.split("-"); vals.forEach((val, i) => list[i].value = val);
标签： javascript arrays string variables