Javascript 选择/高亮显示行并更改同一行中高亮显示的文本字段的值
长期偷窃者，第一次张贴海报 我正在尝试创建一个基于internet的交互式GUI，它具有模仿我的一个客户的产品的控制面板的特定功能，但没有太多运气让它完全实现我想要的功能。我知道答案就在那里。我会尽我最大的努力来描述我想要实现的目标，不要太罗嗦。不过，事实上，看看叉子就是最好的解释 我想做的是让用户通过使用html/css按钮选择显示器上的行——在本例中，“显示器”呈现为无序列表。除此之外，我希望他们能够增加和减少文本框中的值。关键是：我希望他们只有在文本框高亮显示时才能增加和减少值。我遇到的问题是，我无法让每个文本框增加或减少；我只能换第一个。希望这个解释足够清楚，但请查看Plunker以获得最佳理解。当你看到现场直播时，会更加清晰 我已经做了很多不同的草案/版本，并尝试使用表格，但这让我最接近。现在我只需要克服困难。我完全愿意用另一种方式来做这件事，但似乎这只是需要在这里或那里做一些调整来让它继续下去。我在写这篇文章的时候有了一个想法，这篇文章可能有效，不涉及无序的列表或列表项，并且通过边距和填充来执行突出显示，具有“创造性”。不过我还没试过 我尝试在JSFIDLE上设置它，但是我的代码编写方式与他们的软件不一致，所以我尝试了Plunker，它似乎可以工作。不管怎样，这是小提琴：，这是普朗克：。如果有人想去工作的小提琴，让我知道为什么它不工作，这将是感激的；然而，Plunker仍然可以正常工作 我还有一个小问题，可以在主要问题解决后再讨论 谢谢大家的帮助 PS-感谢所有的代码编写者，他们的代码是我借来的。我会死在水里而不会溢出来Javascript 选择/高亮显示行并更改同一行中高亮显示的文本字段的值,javascript,select,text,input,highlight,Javascript,Select,Text,Input,Highlight,长期偷窃者，第一次张贴海报 我正在尝试创建一个基于internet的交互式GUI，它具有模仿我的一个客户的产品的控制面板的特定功能，但没有太多运气让它完全实现我想要的功能。我知道答案就在那里。我会尽我最大的努力来描述我想要实现的目标，不要太罗嗦。不过，事实上，看看叉子就是最好的解释 我想做的是让用户通过使用html/css按钮选择显示器上的行——在本例中，“显示器”呈现为无序列表。除此之外，我希望他们能够增加和减少文本框中的值。关键是：我希望他们只有在文本框高亮显示时才能增加和减少值。我遇到的问
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title></title>
<style type="text/css">
#wrapper {
width: 800px;
height: 400px;
padding: 10px;
border: 1px solid #474747;
}
#screen-container {
float: left;
background: #6799ea;
width: 485px;
height: 300px;
border: 3px solid #efefef;
border-radius: 15px;
color: #ffffff;
}
#d-pad {
position: relative;
float: right;
width: 300px;
height: 300px;
border: 3px solid #efefef;
border-radius: 15px;
}
ul {
margin: 20px 10px 0 -30px;
font-family: arial, helvetica, sans-serif;
text-transform: uppercase;
font-size: 1.5em;
}
li {
list-style-type: none;
line-height: 50px;
}
li:selected {
color: #000;
}
#up {
position: absolute;
margin: 5px 0 0 0;
left: 120px;
width: 50px;
height: 50px;
background-color: #efefef;
cursor: n-resize;
}
#up, #down, #left, #right {
text-align: center;
}
#down {
position: absolute;
margin: 0 0 5px 0;
bottom: 0;
left: 120px;
width: 50px;
height: 50px;
background-color: #efefef;
cursor: s-resize;
}
#left {
position: absolute;
left: 0px;
top: 110px;
width: 50px;
height: 50px;
margin: 5px;
background-color: #b7d9ef;
cursor: w-resize;
}
#right {
position: absolute;
right: 0px;
top: 110px;
width: 50px;
height: 50px;
margin: 5px;
background-color: #b7d9ef;
cursor: e-resize;
}
.number-input {
float: right;
width: 50px;
font-size: 1.5em;
text-align: right;
color: #ffffff;
background-color: 6799ea;
border: 0px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
a {
display: block;
height: 100%;
width: 100%;
text-decoration: none;
}
</style>
<script type="text/javascript">
// For: http://www.codingforums.com/showthread.php?t=223429
var SBoxPtr = 0;
function SBoxPrevNext(amt) {
var sel = document.getElementById('screen-container').getElementsByTagName('li');
SBoxPtr += amt;
if (SBoxPtr < 0) { SBoxPtr = 0; }
if (SBoxPtr > sel.length-1) { SBoxPtr = sel.length-1; }
for (var i=0; i<sel.length; i++) {
if (i == SBoxPtr) { sel[i].style.backgroundColor = 'cyan'; }
else { sel[i].style.backgroundColor = '6799ea'; }
}
}
document.onkeyup = changeChars;
function changeChars(e) {
var KeyID = (window.event) ? event.keyCode : e.keyCode; // alert(KeyID);
if (KeyID == 187) { SBoxPrevNext(1); } // Key '+'
if (KeyID == 189) { SBoxPrevNext(-1); } // Key '-'
if (KeyID == 40) { SBoxPrevNext(1); } // Key 'DownArrow'
if (KeyID == 38) { SBoxPrevNext(-1); } // Key 'UpArrow'
}
window.onload=function(){
SBoxPrevNext(0)
document.getElementById("up").onclick=function(){SBoxPrevNext(-1)}
document.getElementById("down").onclick=function(){SBoxPrevNext(1)}
}
</script>
<script type="text/javascript">
function incrementValue()
{
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('number').value = value;
}
</script>
<script type="text/javascript">
function decrementValue()
{
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value--;
document.getElementById('number').value = value;
}
</script>
</head>
<body>
<div id="wrapper">
<div id="screen-container">
<ul>
<li>Program Line 1 <input class="number-input" type="number" min="0" max="80" value="0" id="number"></li>
<li>Program Line 2 <input class="number-input" type="number" min="0" max="80" value="0"></li>
<li>Program Line 3 <input class="number-input" type="number" min="0" max="80" value="0"></li>
<li>Program Line 4 <input class="number-input" type="number" min="0" max="80" value="0"></li>
<li>Program Line 5 <input class="number-input" type="number" min="0" max="80" value="0" ></li>
</ul>
</div>
<div id="d-pad">
<div id="up"><p>▲</div><div id="down"><p>▼</div>
<div id="left" onclick="decrementValue()"><p style="">◄</p></div><div id="right" onclick="incrementValue()"><p>►</div>
</div>
</div><!-- end wrapper -->
</body>
</html>
#包装纸{
宽度：800px；
高度：400px；
填充：10px；
边框：1px实心#4747；
}
#筛网容器{
浮动：左；
背景：#6799ea；
宽度：485px；
高度：300px；
边框：3倍实心#EFEF；
边界半径：15px；
颜色：#ffffff；
}
#d-pad{
位置：相对位置；
浮动：对；
宽度：300px；
高度：300px；
边框：3倍实心#EFEF；
边界半径：15px；
}
保险商实验室{
利润率：20px 10px 0-30px；
字体系列：arial、helvetica、无衬线字体；
文本转换：大写；
字号：1.5em；
}
李{
列表样式类型：无；
线高：50px；
}
李：入选{
颜色：#000；
}
#向上{
位置：绝对位置；
保证金：5px0；
左：120px；
宽度：50px；
高度：50px；
背景色：#EFEF；
光标：n-调整大小；
}
#上、下、左、右{
文本对齐：居中；
}
#向下{
位置：绝对位置；
保证金：0.5px 0；
底部：0；
左：120px；
宽度：50px；
高度：50px；
背景色：#EFEF；
光标：s-调整大小；
}
#左{
位置：绝对位置；
左：0px；
顶部：110px；
宽度：50px；
高度：50px；
保证金：5px；
背景色：#b7d9ef；
光标：w-调整大小；
}
#对{
位置：绝对位置；
右：0px；
顶部：110px；
宽度：50px；
高度：50px；
保证金：5px；
背景色：#b7d9ef；
光标：e-resize；
}
.数字输入{
浮动：对；
宽度：50px；
字号：1.5em；
文本对齐：右对齐；
颜色：#ffffff；
背景色：6799ea；
边界：0px；
}
输入[类型=编号]：-webkit内部旋转按钮，
输入[类型=编号]：-webkit外部旋转按钮{
-webkit外观：无；
}
a{
显示：块；
身高：100%；
宽度：100%；
文字装饰：无；
}
//用于：http://www.codingforums.com/showthread.php?t=223429
var-SBoxPtr=0；
函数SBoxPrevNext（金额）{
var sel=document.getElementById（'screen-container'）.getElementsByTagName（'li'）；
SBoxPtr+=金额；
如果（SBoxPtr<0）{SBoxPtr=0；}
如果（SBoxPtr>sel.length-1）{SBoxPtr=sel.length-1；}
对于（var i=0；i
我已经设法修复了您的代码，您可以看到正确的plunker
我所作的更正是
而不是：
function incrementValue()
{
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('number').value = value;
}
我已将其固定为：
function incrementValue()
{
var value = parseInt(document.getElementById('number' + SBoxPtr).value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('number'+ SBoxPtr).value = value;
}
并将元素名称从number改为numberX
原创的
<li>Program Line 1
<input id="number" class="number-input" type="number" min="0" max="80" value="0" ></li>
程序行1
固定的：
<li>Program Line 1
<input id="number0" class="number-input" type="number" min="0" max="80" value="0" </li>
程序行1
哇。真是太快了…太神奇了。你完全搞定了！我很高兴我的演示足够清晰，让你能够理解。非常感谢。这将非常有效。现在我要用图片来装扮它，让它看起来像“真实的”控制面板。顺便说一下，我不能按你的建议/解决方案上的向上箭头，因为我还没有足够的声誉。对不起。希望其他人能来帮我做（或者管理员可以授权我做），因为你完美地解决了我的问题。我的意思是完美。我现在还有一个问题要解决。这涉及到文本高亮显示后的样式。我无法使高亮显示的文本更改颜色。我该如何做？我弄乱了文本的这一部分：“if（I==SBoxPtr）{sel[I]。style.backgroundColor='cyan'；}”，但无法确定如何添加附加标记。有什么想法吗？请回答你接受的关于你最后一个问题的问题，我明天会看一看。谢谢。我还是stackoverflow的新手，所以我忘了选择你文章旁边的复选标记。现在一切就绪。我还有几个部分，我认为可能会更高优先级列表中的r。我已经在这里更新了Plunker（）。如果你看第四个选项，它上面写着“Pulse Mix”，我希望它在一组特定的字符中循环，而不是数字；实际上，我根本不希望在那里有一个文本字段。为了简化我要说的内容，它可能是