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

Question

Long-time pilferer, first-time poster. 长期偷窃者，首次张贴。

I'm attempting to create an interactive internet-based GUI with specific features that mimics the control panel of a product of one of my clients, but haven't had much luck getting it to do exactly what I want. 我正在尝试创建一个具有特定功能的，基于Internet的交互式GUI，该功能模仿我一个客户的产品的控制面板，但是运气不高，无法完全按照我的要求进行操作。 I know the answer is out there. 我知道答案就在那里。 I will do my best to describe what I am trying to achieve, without getting too wordy. 我将尽我所能描述我要实现的目标，而不会太冗长。 Really, though, checking out the fork just explains it best. 不过，确实，检查出叉子才是最好的解释。

What I want to do is be able to have the user select rows on a display — in this case the "display" is being rendered as an unordered list — by using html/css buttons. 我想做的是能够使用户选择一个显示器上的行-在这种情况下，“显示器”被呈现为无序列表-通过使用html / css按钮。 In addition to that, I want them to be able to increase and decrease the value in the text box. 除此之外，我希望它们能够增加和减少文本框中的值。 Here's the kicker: I want them to be able to increase and decrease the values ONLY when the text box is highlighted. 这是一个关键点：我希望它们仅在文本框突出显示时才能够增加和减少值。 The issue I'm having is I can't get each of the text boxes to increase and decrease; 我遇到的问题是我无法让每个文本框都增加或减少。 I can only get the first one to change. 我只能让第一个改变。 Hopefully that explanation is clear enough, but please, check out the Plunker to get the best understanding. 希望说明已经很清楚了，但是请查看Plunker以获得最佳理解。 It will be much clearer when you see it live. 当您看到它时，它将更加清晰。

I've made many different drafts/versions of this and have tried using tables, but this has gotten me the closest. 我为此做了许多不同的草稿/版本，并尝试使用表格，但这使我最接近。 Now I just need to get over the hump. 现在我只需要克服困难。 I'm completely open to doing this a different way, but it seems like this just needs a tweak here or there to get it going. 我完全愿意以不同的方式进行此操作，但似乎只需要在此处或此处进行调整即可使其开始。 I had an idea as I was creating this post that might work and doesn't involve a unordered list or list items, and gets "creative" with margins and padding to execute the highlighting. 创建此帖子时，我有一个想法，该想法可能会起作用，并且不涉及无序列表或列表项，并且会以“创意”作为边距和边距来执行突出显示。 I haven't tried that yet, though. 我还没有尝试过。

I tried setting this up on jsfiddle, but something in the way my code is written doesn't jive with their software, so I tried Plunker and it seemed to work. 我尝试在jsfiddle上进行设置，但是编写代码的方式与他们的软件不兼容，因此我尝试了Plunker，它似乎可以工作。 Either way, here's the fiddle: http://jsfiddle.net/brettroby/f5jrL/ , and here's the Plunker: http://plnkr.co/edit/BMSh19?p=preview . 无论哪种方式，这里都是小提琴： http : //jsfiddle.net/brettroby/f5jrL/ ，而这里是Plunker： http ://plnkr.co/edit/BMSh19?p=preview。 If someone wants to go to work on that fiddle and let me know why it's not working, that would be appreciated; 如果有人想在那把提琴上工作，并让我知道为什么它不起作用，那将不胜感激。 however, the Plunker is working just fine as-is. 但是，Plunker仍然可以正常工作。

I also have one other issue that is minor and can be discussed after the main issue is resolved. 我还有一个较小的问题，待主要问题解决后再讨论。

Thanks to all for the help! 感谢大家的帮助！

PS — thanks to all the code writers out there whose code I borrowed to get this far. PS-感谢那里的所有代码编写者，我借用了他们的代码以达到目标。 I'd be dead in the water without stackoverflow. 我会死在水中而没有stackoverflow。

<!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>

Answer 1

I have manged to fixed your code, and you can see the correct plunker here 我已设法修复您的代码，您可以在此处看到正确的插件

The correction I have made are 我所做的更正是

Instead of: 代替：

function incrementValue()
{
   var value = parseInt(document.getElementById('number').value, 10);
   value = isNaN(value) ? 0 : value;
   value++;
   document.getElementById('number').value = value;
}

I have fixed it to: 我已将其修复为：

function incrementValue()
{
   var value = parseInt(document.getElementById('number' + SBoxPtr).value, 10);
   value = isNaN(value) ? 0 : value;
   value++;
   document.getElementById('number'+ SBoxPtr).value = value;
}

And also changed the elements name from number to numberX 并将元素名称从number更改为numberX

Original 原版的

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

Fixed: 固定：

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

Added id = number0 and numbered all other li's 添加id = number0并编号所有其他li

if you find my answer helped you please mark it and press the UP key as well. 如果您发现我的答案有帮助，请对其进行标记，并同时按UP键。 Thanks 谢谢

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2013-09-24 06:25:38

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2013-09-24 06:25:38

解决方案1
0 已采纳 2013-09-24 06:25:38