选择/突出显示行并更改同一行中突出显示的文本字段的值

我试图创建具有特定功能的交互式基于互联网的图形用户界面，模仿我的一个客户的产品的控制面板，但还没有多少运气得到它做正是什么我想要。我知道答案就在那里。我会尽我所能来形容我想要达到的目标，而不会太罗嗦。实际上，检查叉子只是最好的解释。

我想要做的是能够让用户通过使用html/css按钮来选择显示器上的行 - 在这种情况下，“display”被呈现为无序列表。除此之外，我希望他们能够增加和减少文本框中的值。以下是踢球者：我希望他们只有在文本框突出显示时才能增加和减少值。我遇到的问题是我无法让每个文本框都增加和减少;我只能得到第一个改变。希望这个解释已经够清楚了，但是，请检查一下Plunker以得到最好的理解。当你看到它时，它会更清晰。

我已经做了许多不同的草案/版本，并尝试使用表，但这使我最接近。现在我只需要克服驼峰。我完全打开以不同的方式做这件事，但似乎这只是需要在这里或那里调整才能实现。我有一个想法，因为我创建的这个帖子可能工作，并且不涉及无序列表或列表项目，并获得带有边距和填充的“创意”来执行突出显示。不过，我还没有尝试过。

我试着在jsfiddle上设置它，但是我的代码编写的方式并没有与他们的软件混合，所以我尝试了Plunker，它似乎工作。无论哪种方式，这里是小提琴：http://jsfiddle.net/brettroby/f5jrL/，这里是Plunker：http://plnkr.co/edit/BMSh19?p=preview。如果有人想去那个小提琴上工作，并让我知道为什么它不起作用，那将不胜感激;然而，Plunker现在工作得很好。

我还有一个小问题，可以在主要问题解决后再讨论。

感谢大家的帮助！

PS - 感谢所有代码编写者，他们的代码是我借用的代码来实现的。如果没有计算器，我会死在水里。

<!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>&#9650</div><div id="down"><p>&#9660</div> 
<div id="left" onclick="decrementValue()"><p style="">&#9668;</p></div><div id="right" onclick="incrementValue()"><p>&#9658;</div> 
</div> 

</div><!-- end wrapper --> 

</body> 
</html>

来源

2013-09-24 Brett Roby

我已经manged固定你的代码，你可以看到正确的plunker here

我所作出的修正是

相反的：

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; 
}

而且还从数量变化的元素名称numberX

原始

<li>Program Line 1 
<input id="number" class="number-input" type="number" min="0" max="80" value="0" ></li>

修正：

<li>Program Line 1 
<input id="number0" class="number-input" type="number" min="0" max="80" value="0" </li>

新增ID =产品数和编号的其他所有李时珍

如果你发现我的答案帮助你，请标记并按UP键。谢谢

来源

2013-09-24 06:25:38 Scription

哇。这很快......而且很棒。你完全钉了它！我很高兴我的演示足以让你了解并理解。太感谢了。这将很好地工作。现在我打算用图像修饰它，使其看起来像“实际”控制面板。 –

顺便说一下，我无法按下您的建议/解决方案上的向上箭头，因为我没有足够的声望。抱歉。希望别人可以来为我做（或管理员可以授权我这样做），因为你完美地解决了我的问题。我的意思是完美。 –

我现在有另一个问题需要解决。一旦突出显示，这将处理文本的样式。我无法使突出显示的文字改变颜色。我怎么做？我搞砸了这部分文字：“if（i == SBoxPtr）{sel [i] .style.backgroundColor ='cyan';}”，但无法弄清楚如何添加额外的标记。有任何想法吗？ –

选择/突出显示行并更改同一行中突出显示的文本字段的值

回答

相关问题