[英]How can I divide a string and assign a variable for each one?
我正在构建一个图像编辑器。 为了进行预设，我为每个按钮分配了一个自定义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 片段：
//------------------------------- 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>
如何将格式字符串中的日期分配给javascript日期变量？
[英]how can I assign a date in format string to a javascript date variable?
如何使用JavaScript分隔字符串并将值分配给每个字符串？
[英]How can I separate a string using JavaScript and assign values to each piece of the String?
如何解析包含字符串和数字的 JSON 文件，并将每个类别分配给 JS 中的变量？
[英]How can I parse my JSON file that contains strings, and numbers, and assign each category to a variable in JS?
Javascript-如何删除字符串的一部分并将其分配给变量以进行操作？ 琴弦变化
[英]Javascript - How can I remove portion of a string and assign it to a variable for manipulation? String is varied
如何在JavaScript中检查一个字符串是否包含变量值？
[英]How can I check if one string contains a variable value in JavaScript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.