如何划分字符串并为每个字符串分配一个变量

我正在构建一个图像编辑器。为了进行预设，我为每个按钮分配了一个自定义的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()
}

分配给按钮的函数很长，每次引入新的输入时，我都必须添加一个新的变量。这就是我来寻求你帮助的原因。函数可以将字符串分隔为唯一的值吗？

我希望我能明白我的意思。

//编辑，代码笔片段：

//------------------------------- 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('-')分割数据值，然后将值分配给每个输入。

与每次单击预设时为按钮指定新的onclick属性不同，您可以使用全局变量来保存选定的预设，并在单击侦听器中引用该预设。

let selectedPreset;
//------------------------------- 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);
});
}
document.querySelector("#newbut").addEventListener("click", function() {
if (selectedPreset) {
let keys = selectedContainer.dataset.presetKey.split('-');
keys.forEach((key, i) => inputs[i].value = key);
}
});
}
function setPreset(inp) {
const key = inp.getAttribute("data-preset-key");
document.getElementById("demo").innerHTML = key.replaceAll("-", ", ");
selectedPreset = inp;
document.getElementById("newbut").click()
}
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>

抱歉，您的代码非常复杂，每次移动html范围控件时都必须对其进行重构。

我的代码是一个射击原型(远非完美(，它应该给你一个如何以更通用的方式解决这个问题的想法：

const profiles = [
{ value1: 20, value2: 14, value3: 70, value4: 62, value5: 100, value6: 50 },
{ value1: 10, value2: 50, value3: 11, value4: 50, value5: 100, value6: 30 },
{ value1: 80, value2: 100, value3: 11, value4: 62, value5: 50, value6: 50 },
{ value1: 50, value2: 50, value3: 100, value4: 62, value5: 100, value6: 70 }
];
function loadProfile(number) {
const rangeControls = document.querySelectorAll('.user-input');
for (let i=0; i<rangeControls.length;i++) {
rangeControls[i].value = profiles[number][rangeControls[i].id];
}
}

nav {
display: flex;
justify-content: space-around;
}
nav * {
border: solid;
width: 20%;
text-align: center;
border-radius: 5px;
}

<body>
<div id="demo-intro"></div>
<div id="demo"></div>
<nav>
<div id="1" class="filter-container" onclick="loadProfile(0)">A</div>
<div id="2" class="filter-container" onclick="loadProfile(1)">B</div>
<div id="3" class="filter-container" onclick="loadProfile(2)">C</div>
<div id="4" class="filter-container" onclick="loadProfile(3)">D</div>
</nav>
<div id="demo-name"></div>
<ul>
<li><input id="value1" type="range" class="user-input"></li>
<li><input id="value2" type="range" class="user-input"></li>
<li><input id="value3" type="range" class="user-input"></li>
<li><input id="value4" type="range" class="user-input"></li>
<li><input id="value5" type="range" class="user-input"></li>
<li><input id="value6" type="range" class="user-input"></li>
</ul>
<button id="newbut">Check it</button>
</body>

相关内容

最新更新

热门标签：