文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >如何划分一个字符串并为每个字符串分配一个变量？

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

Stack Overflow用户
提问于 2021-06-25 07:54:48
回答 2查看 49关注 0票数 0

我正在构建一个图像编辑器。为了进行预设，我为每个按钮分配了一个自定义的data值。单击每个按钮时，都会将其内部值设置为文档中所有范围滑块的值。

我首先为每个filter-container分配一个onclick函数来解决这个问题，该函数会对字符串进行斜杠处理，然后构建一个新函数。我将此函数分配给现有的按钮。最后，我单击此按钮。

代码语言：javascript
运行
复制
function setPreset(inp) {
    const key = inp.getAttribute("data-preset-key");
    document.getElementById("newbut").setAttribute("onclick", "useKey('" + key.replaceAll("-", "', '") + "')");
    document.getElementById("newbut").click()
}

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

我希望我把我的观点讲清楚了。

//编辑，代码片段：

​

代码语言：javascript
运行
复制
//------------------------------- 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("-");
}
代码语言：javascript
运行
复制
nav {
  display: flex;
  justify-content: space-around
}

nav * {
  border: solid;
  width: 20%;
  text-align: center;
  border-radius: 5px;
}
代码语言：javascript
运行
复制
<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>

​

代码语言：javascript
运行
复制
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;
}
variables
javascript
arrays
string
EN

回答 2

Stack Overflow用户

发布于 2021-06-25 08:28:58

使用.split('-')拆分数据值，然后将值分配给每个输入。

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

​

代码语言：javascript
运行
复制
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(", ");
}
代码语言：javascript
运行
复制
nav {
  display: flex;
  justify-content: space-around
}

nav * {
  border: solid;
  width: 20%;
  text-align: center;
  border-radius: 5px;
}
代码语言：javascript
运行
复制
<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>

​

票数 0
EN

Stack Overflow用户

发布于 2021-06-25 09:54:03

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

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

​

代码语言：javascript
运行
复制
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];
  }
}
代码语言：javascript
运行
复制
nav {
  display: flex;
  justify-content: space-around;
}

nav * {
  border: solid;
  width: 20%;
  text-align: center;
  border-radius: 5px;
}
代码语言：javascript
运行
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/68123899

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档